Vuance UI Kit

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.

App Bar

Anatomy

Every callout is measured from the live medium bar below, so the lines point at the real compound elements.

Headline

Subtitle

  1. 1

    Container

    The bar surface: background, scroll fill, sticky position, and the height reserved for its size.

  2. 2

    Leading — MAppBarNav

    The nav or back icon button. Focus should land here first; it keeps a 48×48 target.

  3. 3

    Headline — MAppBarTitle

    The headline region that stacks title and subtitle and picks typography from the bar's size.

  4. 4

    Title

    The page title. Its text is the bar's accessible name; keep it to a single truncating line.

  5. 5

    Subtitle

    Optional supporting text. Its presence grows the bar to the taller height variant.

  6. 6

    Trailing — MAppBarActions

    One or two action icon buttons plus an optional overflow. Keep it to the essentials.

Sizes

Pick a size from how much prominence the page title needs. medium and large drop the headline to a second row for a larger type ramp.

01

small — 64

A single row: leading, headline, trailing. The default and the densest option, good for most interior pages.

  • Headline uses title-large typography
  • With a subtitle the bar grows to 72
02

medium — 112

Two rows: controls on top, a headline-small title below. Use it to give a landing or section page more presence.

  • Grows to 136 with a subtitle
03

large — 120

Two rows with a headline-medium title for the most prominent page identity.

  • Grows to 152 with a subtitle
Vue
<m-app-bar type="small" title="Inbox" />
<m-app-bar type="medium" title="Inbox" />
<m-app-bar type="large" title="Inbox" />

Alignment

align controls where the headline sits and is fully independent of size — you can center a small bar or start-align a large one.

01

start (default)

The headline aligns to the leading edge, next to the nav icon.

02

center

The headline centers within the bar. The deprecated type="center-aligned" resolves to small + center.

Vue
<m-app-bar type="small" align="center" title="Home" />

Scroll behavior

Separation from content on scroll is a color fill, never a drop shadow. The bar resolves the state itself, or you can control it.

Rest

At top

The container matches the page surface with no elevation.

Scrolled

Filled

Once content scrolls under it, the container fills with surface-container to separate.

Controlled

scrolled prop

Pass :scrolled="true" or false to pin the state; passing it also skips the scroll listener entirely.

Opt out

No reaction

Set :scrolled="false" for a bar that should never change on scroll.

Ready-made and composed

Two entry points from the same component. Pass props for the common case; compose the leaves when you need custom content in any region.

<!-- Ready-made: props render the default headline -->
<m-app-bar type="large" title="Inbox" subtitle="12 unread" />

<!-- Composed: full control over every region -->
<m-app-bar type="medium">
  <m-app-bar-nav>
    <m-button-icon aria-label="Open navigation menu">
      <m-icon name="ic:round-menu" />
    </m-button-icon>
  </m-app-bar-nav>

  <m-app-bar-title title="Inbox" subtitle="12 unread" />

  <m-app-bar-actions>
    <m-button-icon aria-label="Search">
      <m-icon name="ic:round-search" />
    </m-button-icon>
  </m-app-bar-actions>
</m-app-bar>