App Bar API

Full surface of oge-app-bar: its inputs, the three section attribute slots and the config provider.

Properties Slots Types

OgeAppBar

oge-app-bar

Name	Type	Default	Description
`position`	`'top' \| 'bottom'`	`config ?? 'top'`	Edge the bar belongs to — decides the hairline and shadow side, the sticky / fixed edge and which safe-area inset pads it.
`positionMode`	`'static' \| 'sticky' \| 'fixed'`	`config ?? 'static'`	`sticky` sticks to its edge of the nearest scroll container, `fixed` pins to the viewport (full width, inline safe-area insets). Both use the `--oge-z-app-bar` layer and pad with `env(safe-area-inset-*)` as a floor.
`color`	`'default' \| 'primary' \| 'inverse' \| 'transparent'`	`config ?? 'default'`	Surface: the page surface with a hairline, the accent, the dark tooltip surface, or none.
`size`	`'sm' \| 'md' \| 'lg'`	`config ?? 'md'`	Density preset — 48 / 56 / 64 px rows.
`elevated`	`boolean`	`false`	Draws a shadow on the bar’s content edge.
`landmark`	`'none' \| 'banner' \| 'contentinfo' \| 'navigation' \| 'region'`	`'none'`	Landmark role, only on request: `banner` for the one page header, `contentinfo` for a page footer, `navigation` / `region` (with `ariaLabel`) for a named secondary bar.
`ariaLabel`	`string \| undefined`	—	Accessible name of the landmark — written only when `landmark` is not `none` (a role-less element may not carry one).
`centerAlign`	`'start' \| 'center'`	`'start'`	Alignment of the center section’s content.

Name	Type	Description
`OgeAppBarStart`	`[ogeAppBarStart]`	Attribute marker moving an element into the start section (a menu button, a logo).
`OgeAppBarCenter`	`[ogeAppBarCenter]`	Moves an element into the center section explicitly — rendered before unmarked content, which lands there too.
`OgeAppBarEnd`	`[ogeAppBarEnd]`	Moves an element into the end section (actions, an avatar).

Name	Type	Description
`OgeAppBarPosition`	`'top' \| 'bottom'`	Edge union.
`OgeAppBarPositionMode`	`'static' \| 'sticky' \| 'fixed'`	Positioning union.
`OgeAppBarColor`	`'default' \| 'primary' \| 'inverse' \| 'transparent'`	Surface union.
`OgeAppBarSize`	`'sm' \| 'md' \| 'lg'`	Density union.
`OgeAppBarLandmark`	`'none' \| 'banner' \| 'contentinfo' \| 'navigation' \| 'region'`	Landmark union.
`OgeAppBarCenterAlign`	`'start' \| 'center'`	Center alignment union.

Name	Type	Description
`provideOgeAppBarConfig(config)`	`(config: OgeAppBarConfigInput \| (() => OgeAppBarConfigInput)) => Provider`	Application- or component-scoped defaults for `position`, `positionMode`, `color` and `size`. There is deliberately no `messages` block: the bar renders no user-facing strings.
`OGE_APP_BAR_CONFIG`	`InjectionToken<OgeAppBarConfig>`	The token behind `provideOgeAppBarConfig()`, with `OGE_DEFAULT_APP_BAR_CONFIG` as its factory default.

Name	Type	Description
`OgeAppBarConfig / OgeAppBarConfigInput`	`interface`	The config shape and its partial input; `OGE_DEFAULT_APP_BAR_CONFIG` is the resolved default.