shadcn.io is an independent project built on shadcn/ui
The bar shows Collaboration. The panel groups links under Team Tools, Project Tools, and Management, including Team Management, Project Timeline, and Reports.
Use section headings when the links are related but not the same kind of thing. A Sidebar keeps those groups open while people work. In Solid, Ark UI moves between the triggers with Tab.
Installation
Anatomy
Usage
<div class="w-full max-w-md rounded-md border bg-background p-px">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Collaboration</NavigationMenuTrigger>
<NavigationMenuContent>
<div class="flex w-[400px] max-w-full flex-col gap-4 p-2">
{sections.map(section => <div class="flex flex-col gap-1">
<h4 class="px-2 font-semibold text-sm">
{section.title}
</h4>
{section.items.map(item => <NavigationMenuLink asChild={props => <a {...props()} href={item.href}>
<Dynamic component={item.icon} aria-hidden="true" class="mt-0.5 size-4" />
<div class="flex flex-col gap-0.5">
<span class="font-medium">{item.label}</span>
<span class="text-muted-foreground">
{item.description}
</span>
</div>
</a>} class="items-start gap-2" />)}
</div>)}
</div>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</div>FAQ
How are the sections built?
From a list of sections at the top of the file, each a title and its links. Each renders an h4 heading followed by its NavigationMenuLinks.
How are the icons rendered?
Each item's icon is a Lucide component stored in the data, rendered inside the link and hidden from assistive tech, since the label beside it names the link.
How do the links use my router?
Each link is your router's link rendered through NavigationMenuLink, so it keeps the menu's styles and focus handling.
NavigationMenuLink takes asChild, a function that renders your router's A with the props it gets.
API Reference
Navigation Menu
Sets asChild and props. The rest is on the Navigation Menu page.
