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 Svelte, Ark UI does not mark the current link.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Navigation</Button>{/snippet}</SheetTrigger><SheetContent side="left"><SheetHeader><SheetTitle>Navigation</SheetTitle></SheetHeader><nav class="flex flex-col gap-4 p-4">{#each GROUPS as group (group.title)}<div class="flex flex-col gap-2"><h3 class="font-semibold text-sm">{group.title}</h3>{#each group.links as link (link)}<a class="ps-4 text-muted-foreground text-sm hover:text-foreground" href="#">{link}</a>{/each}</div>{/each}</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 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.
