shadcn.io is an independent project built on shadcn/ui
The sheet is titled Menu. Products heads All Products, New Arrivals, and Best Sellers. Resources heads Documentation, Guides, and API Reference.
Use it when two levels still fit in a panel. Collapse a long section with an Accordion if only one group should be open. In Svelte, Ark UI does not indent the links.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Menu</Button>{/snippet}</SheetTrigger><SheetContent side="left"><SheetHeader><SheetTitle>Menu</SheetTitle></SheetHeader><nav class="flex flex-col gap-4 p-4">{#each SECTIONS as section (section.title)}<div class="flex flex-col gap-2"><h3 class="font-semibold text-sm">{section.title}</h3><div class="flex flex-col gap-1 ps-4">{#each section.links as link (link)}<a class="text-muted-foreground text-sm hover:text-foreground" href="#">{link}</a>{/each}</div></div>{/each}</nav></SheetContent></Sheet>FAQ
How are the sections built?
From a static array of two sections, each a heading and its links. Products holds All Products, New Arrivals and Best Sellers; Resources holds Documentation, Guides and API Reference.
How are the child links indented?
Their column has ps-4, padding on the start side, so the indent moves to the right in right-to-left layouts.
Can the sections collapse?
Not in this demo: both are always open. Wrap each section in a Collapsible with the heading as its trigger to fold it away.
Does the sheet close when a link is clicked?
Links in a sheet don't close it. When a link changes the page, close the sheet in its click handler, or let your router's navigation unmount it. To close it from code, control the open state:
Pass open to Sheet and read details.open in onOpenChange.
API Reference
Sheet
Sets side="left". The rest is on the Sheet page.
Button
Sets props and variant="outline". The rest is on the Button page.
