Navigation
Nav item
Section titled “Nav item”Sidebar navigation row; collapsed = icon only.
Variants: 6
| Property | Type / options |
|---|---|
| Label | text |
| Icon swap | instance swap (icon) |
| Badge | boolean (off) |
| Chevron | boolean (off) |
| Collapsed | False · True |
| State | Default · Hover · Active |
Sidebar navigation
Section titled “Sidebar navigation”App sidebar 280px or 72px rail.
Variants: 2
| Property | Type / options |
|---|---|
| Collapsed | False · True |
Do
- Keep 5–8 top-level items.
- Highlight the current page.
- Use Collapsed on small screens.
Don’t
- Don’t nest more than two levels.
- Don’t mix icon styles.
- Don’t put primary actions in the nav.
App header
Section titled “App header”Top navigation bar for apps.
Variants: 1