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 Vue, 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">
<div v-for="section in sections" class="flex flex-col gap-1" :key="section.title">
<h4 class="px-2 font-semibold text-sm">{{ section.title }}</h4>
<NavigationMenuLink
v-for="item in section.items"
:asChild="true"
class="items-start gap-2"
:key="item.label"
>
<a :href="item.href">
<component :is="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>
</NavigationMenuLink>
</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 as-child, and the demo puts an anchor inside. Put RouterLink or NuxtLink there instead.
API Reference
Navigation Menu
Sets v-for="item in section.items", asChild and key="item.label". The rest is on the Navigation Menu page.
