Navigation

App Bar

A top bar built as a compound family: MAppBar owns layout integration and the scroll fill, while MAppBarNav, MAppBarTitle, and MAppBarActions place themselves. Size and alignment are independent axes, and a subtitle works on every size.

Playground

Configure size, alignment, sticky, and the scroll fill, and copy synchronized kebab-case markup.

Properties

Type

Align

Sticky

Scrolled

Vue

<m-app-bar
  title="Vuance UI"
  subtitle="Documentation"
  type="small"
  align="start"
  sticky
  :scrolled="false"
 />

MAppBar API

Props, slots, and events are hydrated from the generated public manifest. MAppBarNav, MAppBarTitle, and MAppBarActions are the compound leaves.

MAppBar

Navigation family

src/runtime/components/ui/app-bar

Props

NameTypeDefault

titleReady-made headline text; omit and compose `<MAppBarTitle>` for full control.

string''

subtitleReady-made supporting text under the title.

string''

typeMD3 size. `'center-aligned'` is a deprecated alias for `small` + `align: center`.

AppBarSize | 'center-aligned''small'

alignHeadline alignment axis. Presets `start | center`; for anything more exotic style `<MAppBarTitle>` / the actions slot directly — the compound children accept ordinary `class`/`style` flex overrides.

'start' | 'center''start'

stickyPin to the top when the bar is a direct child of `m-layout`.

booleantrue

scrolledScroll-fill control (MD3: fill, not shadow). - `undefined` (default) — auto: follows the layout/window scroll offset. - `true` / `false` — controlled: pins the state and skips the scroll listener entirely (opt out of any scroll reaction).

boolean | undefinedundefined

Slots

Events

MAppBar does not emit component-specific events. Native events fall through to its root element.