shadcn.io is an independent project built on shadcn/ui
A menu button opens a panel from the left titled Menu. It has a short description, one line about navigation, and Close.
Use it for navigation on a small screen. On a wide layout, keep those links in a Sidebar. In Svelte, Ark UI closes it when the panel is swiped away.
Installation
Anatomy
Usage
<Drawer swipeDirection="left"><DrawerTrigger>{#snippet asChild(props)}<Button {...props({ "aria-label": "Open menu" })} size="icon-md" variant="outline"><MenuIcon aria-hidden="true" /></Button>{/snippet}</DrawerTrigger><DrawerContent showBar={false}><DrawerHeader><DrawerTitle>Menu</DrawerTitle><DrawerDescription>This drawer slides in from the left side.</DrawerDescription></DrawerHeader><div class="p-4"><p class="text-muted-foreground text-sm">Left-side drawers are commonly used for navigation menus and sidebars.</p></div><DrawerFooter><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Close</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>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.
asChild on DrawerTrigger receives props: spread them onto the button.
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.
asChild on DrawerClose receives props: spread them onto the button.
API Reference
Drawer
Sets swipeDirection="left" and showBar={false}. The rest is on the Drawer page.
Button
Sets props, aria-label, Open, menu, size="icon-md" and variant="outline". The rest is on the Button page.
