Layout

Application shell with optional overlay header and side navigation.

Compose with LayoutHeader, LayoutSidebar, and LayoutMain slots. Pair overlay_header=true with a Fixed or Sticky AppBar in the header slot.

Full-page application shells with header, optional side nav, and scrollable main content
Pinned sticky frost headers where page content scrolls beneath the bar
Opaque fixed headers where content and scrollbar start below the bar (inner scroll)
Inline header layouts without overlay chrome

Set overlay_header=true when the header uses Sticky or Fixed AppBar.
Use Sticky AppBar with frost material for the default pinned window-scroll shell.
Set main_inset_scroll=true for opaque fixed bars with inner main scroll below the bar.
Match header_inset density to the AppBar density tier.
Place navigation in LayoutSidebar and page content in LayoutMain.
LayoutSidebar stays pinned below the bar; only the page scrolls in pinned mode.

Inline header

Header and main in normal document flow—the default stacked shell.

Workspace

Main content

Overlay pinned header

Sticky frost header—content starts below the bar and scrolls beneath it via window scroll.

First line starts below the bar.

Scroll to see content pass under the frosted header.

Overlay inset header

Opaque fixed header—content and scrollbar start below the bar with no scroll-under.

First line starts below the bar.

Content stays below the opaque header when scrolling.

App shell

Header, sidebar, and main—the catalog-style compound shell.

Preview outlet