App Bar

Application shell header composed from Material and region slots.

The top application header surfaces screen context, wayfinding, and actions tied to the current view. Content is host-composed via AppBarLeading, default children (center), and AppBarTrailing. Configure surface treatment through the AppBarMaterial slot (variant, elevation, corners).

Application shell chrome above primary content
Screen titles, breadcrumbs, and workspace branding
Inline search, filters, or section navigation in the center band
Account, theme, and utility controls in the trailing region

Configure surface via AppBarMaterial slot (variant, elevation, corners).
Place branding and wayfinding in AppBarLeading.
Put search, filters, or inline nav in default children (center region).
Place account and utility controls in AppBarTrailing.
Adjust position and density for scroll behavior and vertical budget.
Pair Sticky bars with Layout overlay_header=true for pinned frost shells; use main_inset_scroll=true with Fixed opaque bars for inset inner scroll.

Standard shell

Workspace title in leading and a sign-in action in trailing—the default application header.

Inline wayfinding

Product mark in leading, section links in center, account control in trailing.

Centered search

Title in leading, scoped search field in center, actions in trailing.

Search-first

Minimal leading label; the search field owns the center band.

Compact density

48px compact bar for secondary tool rows.

Expanded density

96px expanded band for hero title or branding in leading.

Shell surface

Shell material with flat elevation—catalog-style frosted shell chrome.

Raised over content

Raised elevation separates the header from scrolling body content below.

Sticky while scrolling

Bar pins to the top of its scroll container while content moves beneath.

Scroll to see the bar stay pinned.

Fixed with scroll body

Fixed bar with scrollable content below—the host must offset body content.

Content scrolls beneath the fixed bar.