shadcn.io is not affiliated with official shadcn/ui
Drawer examples · Left
Simple Left Drawer for React
A drawer that slides in from the left, opened by a menu button, with a title, a description and a Close button.
The basic left drawer: a menu icon button opens a panel from the left with a title, a description, a line of text and a Close button. People can also swipe it back to the left to close it. Use it for navigation and sidebars on small screens.
Preview
Installation
FAQ
How does this drawer open from the left?
swipeDirection="left" on Drawer puts it on the left edge. The prop names the swipe that closes the drawer, so left docks it on the left; leave it out for a bottom drawer.
How is the menu button labeled?
An outline icon button opens the drawer. Its aria-label, Open menu, is the accessible name; the icon is aria-hidden.
The Button goes in the render prop of DrawerTrigger.
What's inside the panel?
DrawerHeader with the title Menu and the description This drawer slides in from the left side, one paragraph, and DrawerFooter with a Close button.
How does Close work?
It's a DrawerClose, so it dismisses the drawer. Swiping it back toward its edge, Escape and a click on the overlay all close it, and focus goes back to the trigger.
The Button goes in the render prop of DrawerClose.
Related
- Simple Bottom DrawerA bottom drawer with a title, a
- Left Drawer Navigation MenuA left drawer with a navigation menu of
- Bottom-Sliding SheetA sheet that slides up from the bottom of
- Left Drawer with SearchA left drawer with a search field above
- Standard DialogA share dialog with a read-only link, a
- Left Drawer File ExplorerA left drawer with a file tree whose