Adaptive Navigation
Material Design 3 navigation drawer, navigation rail, and navigation bar web components.
- 4.9 KB gzipped
- @lit-material/navigation 0.2.0
- Renders on the server
Example
Adaptive navigation
One list of destinations, shown as a bar under 600px, a rail from 600px and a drawer from 840px. Resize the window to see it switch.
Selected: Overview
Install
npm install @lit-material/navigation @lit-material/tokensimport "@lit-material/navigation/adaptive-navigation.js";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-adaptive-navigation>
One set of destinations shown as M3 prescribes for the window's width: a
navigation bar on compact windows (under 600px), a rail on medium ones
(600–839px), and a drawer — or a rail, with expanded="rail" — on
expanded ones (840px and up).
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
destinations | property only | NavigationDestination[] | [] | |
selected | selected | number | -1 | |
expanded | expanded | "drawer" | "rail" | "drawer" | What expanded windows show: drawer (default) or rail. |
label | label | string | "Main" | The accessible name of the navigation landmark. |
Events
| Event | Description |
|---|---|
change | The selection changed; read selected. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-adaptive-navigation-medium | Not a variable: breakpoints are fixed at 600px and 840px (M3 window size classes). |