Components
Drawer
A panel at the edge of the screen.
Drawer holds navigation or a side sheet at one edge. A temporary drawer opens over the page like a dialog; a persistent or permanent drawer sits beside the content.
import Drawer from '@hone-ui/react/Drawer';Examples
Messages
<Box sx={{ display: 'flex', minHeight: 200 }}>
<Drawer
variant="permanent"
sx={{ width: 200 }}
slotProps={{ paper: { style: { position: 'static', width: 200 } } }}
>
<List>
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary="Inbox" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary="Drafts" />
</ListItemButton>
</ListItem>
</List>
</Drawer>
<Box sx={{ p: 2 }}>
<Typography>Messages</Typography>
</Box>
</Box>Props
| Prop | Type | Default | Description |
|---|---|---|---|
anchor | 'left', 'right', 'top', 'bottom' | 'left' | The edge it comes from. |
variant | 'temporary', 'persistent', 'permanent' | 'temporary' | Modal over the page, or docked beside it. |
open | boolean | false | Shows it. permanent ignores it. |
onClose | (event, reason) => void | reason is backdropClick or escapeKeyDown. | |
elevation | number | 16 | The temporary paper's shadow. |
hideBackdrop | boolean | false | Leaves out the dimmed layer. |
transitionDuration | number, { enter, exit } | theme | The slide length in milliseconds. |
PaperProps, slotProps.paper | Paper props | Props for the surface. | |
slotProps.backdrop | Backdrop props | Props for the backdrop. | |
sx, className, style, ref | Standard. |
Notes
- Every paper is fixed to its edge. A docked root keeps the space in the page, so give the root and the paper the same width.
- A closed persistent drawer stays mounted, hidden and inert.
ModalProps,SlidePropsand SwipeableDrawer are not supported.
Accessibility
A temporary drawer is a modal dialog: focus is trapped, the page is hidden from screen
readers and focus returns to the opener. A drawer has no title part, so it needs an accessible name: set aria-label or aria-labelledby.