Composition / Navigation
Mobile Navigation Panel
Open a focus-safe mobile navigation sheet with grouped destinations and current-page state.
EC
06 / Navigation sheet
Everything in reach.
Last destination: overview
Delivery contract
Install it
pnpm add easecraft@0.1.0The composition imports stable APIs from easecraft.
Files / 02
- utility
components/easecraft/compositions/mobile-navigation-panel-core.tsx - composition
components/easecraft/compositions/mobile-navigation-panel.tsx
Dependencies / 03
- easecraft
- npm / 0.1.0
- react
- peer / >=18.2.0 <20.0.0
- react-dom
- peer / >=18.2.0 <20.0.0
Component graph
Foundations
Interaction contract
Keyboard
- Tab / Shift+Tab
- Moves through enabled navigation destinations and footer actions.
- Enter
- Activates the focused navigation destination.
- Escape
- Closes the modal panel and restores trigger focus.
Release requirement
Accessibility
- Pattern
- modal-navigation
- Focus management
- Required
- Reduced motion
- Immediate semantic fallback
- Note
- Uses a modal dialog containing a labelled navigation landmark and semantic section lists.
- Note
- Marks the current page, removes disabled destinations from focus, and closes after enabled navigation by default.