Navigation suite
The navigation suite scaffold (COMPONENT_SPEC §16; Compose NavigationSuiteScaffold) shows one set of destinations as the navigation component the window size class calls for, next to or above the content, and switches as the window resizes. The selection, the item elements (bar ↔ rail) and keyboard focus survive a switch. Resize the window from 360 to 1800px to see it.
| Window | Navigation | Source |
|---|---|---|
| compact width (< 600px) | short navigation bar, items stacked | Compose navigationSuiteType |
| 600px and wider, under 480px tall (or tabletop) | short navigation bar, horizontal items | Compose navigationSuiteType |
| medium, expanded (600–1199px) | collapsed wide navigation rail | Compose navigationSuiteType |
| large, extra-large (≥ 1200px) | expanded wide navigation rail | m3.material.io (Compose keeps the collapsed rail); configurable |
Override it with a fixed layout-type / layoutType (for example navigation-drawer), expanded-from / expandedFrom (none / null: Compose's own rule), expanded-type / expandedType (a permanent drawer instead of the expanded rail), or a function of the window size class (navigationSuiteType).
Element
<m3e-navigation-suite label selected> with <m3e-navigation-item> children; a child with slot="primary-action" (here a FAB) floats above the bar and heads the rail; every other child is the content. hideNavigation() / showNavigation() run Compose's show / hide spring.
Type: ; selected:
React
<NavigationSuiteScaffold items selectedKey onSelectionChange layoutType navigationSuiteType expandedFrom expandedType isNavigationHidden primaryAction> with the content as children. Pick a fixed type or keep the adaptive rule.
No JavaScript
.m3e-navigation-suite--adaptive holds every navigation it may show (a bar, a horizontal bar, a collapsed and an expanded rail) and media queries at the window size class breakpoints pick the one the default rule picks.
Sources
androidx Compose Material3 adaptive navigation suite at 19991f2c: NavigationSuiteScaffold.kt (scaffold, layout, state, defaults, the navigationSuiteType rule) and NavigationSuiteScaffoldSamples.kt; window-core WindowSizeClass.kt (breakpoints). m3.material.io navigation guidance for the expanded rail at large widths.