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 Vue, Ark UI does not indent the links.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger :asChild="true"><Button variant="outline">Menu</Button></SheetTrigger>
<SheetContent side="left">
<SheetHeader><SheetTitle>Menu</SheetTitle></SheetHeader>
<nav class="flex flex-col gap-4 p-4">
<div v-for="section in SECTIONS" class="flex flex-col gap-2" :key="section.title">
<h3 class="font-semibold text-sm">{{ section.title }}</h3>
<div class="flex flex-col gap-1 ps-4">
<a
v-for="link in section.links"
class="text-muted-foreground text-sm hover:text-foreground"
href="#"
:key="link"
>
{{ link }}
</a>
</div>
</div>
</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 listen to @open-change, which receives details.open.
API Reference
Sheet
Sets asChild and side="left". The rest is on the Sheet page.
Button
Sets variant="outline". The rest is on the Button page.
