Documentation
Asgard
Getting started
Theming
Guides
Inputs & forms
Pickers
Data display
Layout & docking
Feedback & overlays
Navigation & chrome
Feedback & overlays
A panel that slides in from an edge.
A sliding drawer panel that emerges from any edge of the screen for navigation, settings, or detail views.
Key features:
- Anchors:
left,right,top,bottom - Variants:
temporary(backdrop overlay),persistent(pushes content),permanent(always visible) - Configurable
width/heightand semantic color theming - Backdrop click and escape key dismissal
Loading preview…
When to use it
- Mobile navigation menus
- Filter and settings panels
- Detail / inspector views
- Persistent side panels
- Full-height chat / conversation panels
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controls whether the drawer is currently visible. |
onClose | () => void | — | Callback invoked when the drawer requests to be closed, such as when clicking the backdrop. |
anchor | 'left' | 'right' | 'top' | 'bottom' | 'left' | The edge of the screen from which the drawer slides in. |
variant | 'temporary' | 'persistent' | 'permanent' | 'temporary' | Interaction mode. Temporary shows a backdrop overlay, persistent pushes adjacent content, and permanent is always visible. |
width | number | 280 | Width in pixels for left or right anchored drawers. |
height | number | 280 | Height in pixels for top or bottom anchored drawers. |
semantic | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | — | Semantic color theme applied to the drawer background and styling. |
children | ReactNode | — | Content rendered inside the drawer panel. |
Notes
- The temporary variant adds a semi-transparent backdrop overlay that closes the drawer when clicked.
- The persistent variant pushes adjacent page content aside without an overlay, keeping both the drawer and content interactive.
- The permanent variant renders the drawer as always visible, typically used for fixed navigation sidebars.
Presets