shadcn.io is an independent project built on shadcn/ui
The title is Navigation. Dashboard heads Overview and Analytics. Settings heads Profile and Account.
Use it for app navigation on a small screen. A Sidebar is the version that stays open on a wide page. In Vue, Ark UI does not mark the current link.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger :asChild="true">
<Button variant="outline">Navigation</Button>
</SheetTrigger>
<SheetContent side="left">
<SheetHeader><SheetTitle>Navigation</SheetTitle></SheetHeader>
<nav class="flex flex-col gap-4 p-4">
<div v-for="group in GROUPS" class="flex flex-col gap-2" :key="group.title">
<h3 class="font-semibold text-sm">{{ group.title }}</h3>
<a
v-for="link in group.links"
class="ps-4 text-muted-foreground text-sm hover:text-foreground"
href="#"
:key="link"
>
{{ link }}
</a>
</div>
</nav>
</SheetContent>
</Sheet>FAQ
How are the groups built?
From a static array: each group has a title, rendered as an h3, and its links. The nav lays the groups out in a column with gap-4.
How do I mark the current page?
Set aria-current="page" on the link for the page people are on and style it, for example with aria-[current=page]:text-foreground.
How are the links indented?
Each link has ps-4, padding on the start side, so the indent mirrors in right-to-left layouts.
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.
