Component · navigation.sidebar
Sidebar
A persistent or dismissible side region for hierarchical navigation.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
header | no | Optional title or brand region. |
items | yes | Hierarchical navigation items. |
footer | no | Secondary actions or metadata. |
States
- default
- expanded
- collapsed
- overlay
Keyboard
- Tab and arrow keys move among items according to the tree or list pattern used
- Enter activates the focused destination
- Escape dismisses an overlay sidebar
Accessibility
Provide a navigation landmark or complementary region with an accessible name. Overlay sidebars must manage focus while open and restore focus on close. Collapsed icon-only items still need names.
Motion
Width or slide transitions may ease; under reduced motion, snap between expanded and collapsed layouts.
Platform mappings
web
web
nav or complementary with disclosure controls; dialog-like focus handling when modal overlay.
apple
apple
SwiftUI NavigationSplitView sidebar column.
android
android
Compose ModalNavigationDrawer or permanent navigation rail/drawer.