Navigation · M3 Expressive

Navigation bar

The M3 Expressive flexible bar is 64dp: vertical items on compact windows, horizontal items on medium windows. The 80dp tall bar is the baseline configuration. The active indicator grows from its center and the icon fills when selected. Arrow keys (and Home / End) move focus between destinations.

Home

Short · vertical items 64dp · surface-container · level2 · indicator 56×32dp full · label-medium · active label secondary · badge 6dp / 16dp

Inbox

Tall (baseline) 80dp · 12dp top padding · indicator 56×32dp · fastSpatial size, defaultEffects alpha

Explore

Short · horizontal items (medium window) 64dp · indicator 40dp tall, hugs content, 16dp padding · icon → label 4dp · items take 60/70/80/90% for 3/4/5/6 items · active label on-secondary-container

Navigation rail

Collapsed (96dp) and expanded (220–360dp, hugs the widest item) on the defaultSpatial spring. The modal rail floats over the content with a scrim, traps focus and closes on Escape, scrim click or selection. Up / Down move focus between items.

Inbox

Standard · collapsed ⇄ expanded collapsed 96dp · items 64dp, 4dp gap, indicator 56×32 · expanded items 56dp full-width pill, label-large, 8dp icon gap · top 44dp · header → items 40dp · surface

Favorites

Modal · expanded over content surface-container · level2 · 16dp end corners · scrim 32% · width on fastSpatial

Outbox

Collapsed · centered, no header align center · badge on the icon's top-end corner

Navigation drawer

Baseline component (M3 Expressive recommends the expanded rail instead). Standard drawers sit inline; modal drawers use the sheet primitive.

Standard 360dp · surface · level0 · items 56dp full radius, 12dp inset · label-large · icon 24 + 12dp gap · title-small headlines · divider inset 28dp

Selected: favorites. Selecting an item closes the drawer.

Modal 360dp · surface-container-low · level1 · 16dp end corners · scrim 32% · open defaultSpatial, close fastEffects

App bars

Scroll each frame. The container turns surface-container when content scrolls under it; flexible bars collapse to 64dp, cross-fade their titles and snap open or closed when you stop mid-way.

Inbox

A Message 1 Supporting text for list row 1
B Message 2 Supporting text for list row 2
C Message 3 Supporting text for list row 3
D Message 4 Supporting text for list row 4
E Message 5 Supporting text for list row 5
F Message 6 Supporting text for list row 6
G Message 7 Supporting text for list row 7
H Message 8 Supporting text for list row 8
I Message 9 Supporting text for list row 9
J Message 10 Supporting text for list row 10
K Message 11 Supporting text for list row 11
L Message 12 Supporting text for list row 12

Small 64dp · title-large · 4dp side padding · leading on-surface · trailing on-surface-variant · 48dp action targets · toggle action: selected primary, round → square · scrolled surface-container (defaultEffects)

Photos

2,481 items

A Album 1 Supporting text for list row 1
B Album 2 Supporting text for list row 2
C Album 3 Supporting text for list row 3
D Album 4 Supporting text for list row 4
E Album 5 Supporting text for list row 5
F Album 6 Supporting text for list row 6
G Album 7 Supporting text for list row 7
H Album 8 Supporting text for list row 8
I Album 9 Supporting text for list row 9
J Album 10 Supporting text for list row 10
K Album 11 Supporting text for list row 11
L Album 12 Supporting text for list row 12

Center-aligned 64dp · centered title-large · label-medium subtitle · one filled trailing action

Travel plans

3 upcoming trips

A Trip 1 Supporting text for list row 1
B Trip 2 Supporting text for list row 2
C Trip 3 Supporting text for list row 3
D Trip 4 Supporting text for list row 4
E Trip 5 Supporting text for list row 5
F Trip 6 Supporting text for list row 6
G Trip 7 Supporting text for list row 7
H Trip 8 Supporting text for list row 8
I Trip 9 Supporting text for list row 9
J Trip 10 Supporting text for list row 10
K Trip 11 Supporting text for list row 11
L Trip 12 Supporting text for list row 12

Medium flexible 112dp (136 with subtitle) → 64dp · headline-medium · label-large subtitle · title baseline 24dp

Library

A Book 1 Supporting text for list row 1
B Book 2 Supporting text for list row 2
C Book 3 Supporting text for list row 3
D Book 4 Supporting text for list row 4
E Book 5 Supporting text for list row 5
F Book 6 Supporting text for list row 6
G Book 7 Supporting text for list row 7
H Book 8 Supporting text for list row 8
I Book 9 Supporting text for list row 9
J Book 10 Supporting text for list row 10
K Book 11 Supporting text for list row 11
L Book 12 Supporting text for list row 12

Large flexible 120dp (152 with subtitle) → 64dp · display-small · title-medium subtitle · title baseline 28dp · tonal toggle action (selected secondary)

O

A Conversation 1 Supporting text for list row 1
B Conversation 2 Supporting text for list row 2
C Conversation 3 Supporting text for list row 3
D Conversation 4 Supporting text for list row 4
E Conversation 5 Supporting text for list row 5
F Conversation 6 Supporting text for list row 6
G Conversation 7 Supporting text for list row 7
H Conversation 8 Supporting text for list row 8
I Conversation 9 Supporting text for list row 9
J Conversation 10 Supporting text for list row 10
K Conversation 11 Supporting text for list row 11
L Conversation 12 Supporting text for list row 12

Search app bar 64dp · field 56dp full · surface-container → surface-container-highest on scroll · hint body-large

Settings

Mirrors the “Small” demo: scroll it and this bar switches too (scrolled = false).

Controlled `scrolled` scrollContainer=null · drive the color yourself

Toolbars

Floating toolbars (horizontal or vertical, standard or vibrant, with an optional FAB) and the docked toolbar that replaces the bottom app bar. Arrow keys move focus between items.

Floating · horizontal 64dp · full radius · 8dp padding · 4dp gap · level3 · FAB 56dp, 8dp gap · standard surface-container / vibrant primary-container

Floating · vertical 64dp wide · same tokens · FAB below the toolbar · ≥24dp screen margin

A Note 1 Supporting text for list row 1
B Note 2 Supporting text for list row 2
C Note 3 Supporting text for list row 3
D Note 4 Supporting text for list row 4
E Note 5 Supporting text for list row 5
F Note 6 Supporting text for list row 6
G Note 7 Supporting text for list row 7
H Note 8 Supporting text for list row 8
I Note 9 Supporting text for list row 9
J Note 10 Supporting text for list row 10
K Note 11 Supporting text for list row 11
L Note 12 Supporting text for list row 12
M Note 13 Supporting text for list row 13
N Note 14 Supporting text for list row 14

Floating · hide on scroll exits after 40dp of scroll, returns after 40dp back · snap on defaultEffects

Docked toolbar · bottom app bar docked 64dp full width, 16dp side padding, surface-container · bottom app bar 80dp, level2, FAB 56dp level0, 16dp from the end

Tabs

Primary tabs sit below the top app bar; secondary tabs live inside content. The indicator measures the active tab and slides on the defaultSpatial spring.

Content for “flights”.

Primary · icon + label 64dp · indicator 3dp, 3dp top corners, content width (min 24dp) · active primary · title-small · badge overlaps icon

Content for “overview”.

Primary · label only 48dp · 16dp horizontal padding · badge 4dp after the text

Content for “all”.

Secondary 48dp · indicator 2dp, full tab width · active on-surface · divider 1dp outline-variant

Content for “photos”.

Secondary · inline icons 48dp · icon 24 · icon → label 8dp