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 Solid, Ark UI does not mark the current link.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger asChild={props => <Button {...props()} variant="outline">Navigation</Button>} />
<SheetContent side="left">
<SheetHeader>
<SheetTitle>Navigation</SheetTitle>
</SheetHeader>
<nav class="flex flex-col gap-4 p-4">
{GROUPS.map(group => <div class="flex flex-col gap-2">
<h3 class="font-semibold text-sm">{group.title}</h3>
{group.links.map(link => <a class="ps-4 text-muted-foreground text-sm hover:text-foreground" href="#">
{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 read details.open in onOpenChange.
API Reference
Sheet
Sets asChild, props and side="left". The rest is on the Sheet page.
Button
Sets props and variant="outline". The rest is on the Button page.
