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 Svelte, 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">{#each sections as section (section.title)}<div class="flex flex-col gap-1"><h4 class="px-2 font-semibold text-sm">{section.title}</h4>{#each section.items as item (item.label)}<NavigationMenuLink class="items-start gap-2">{#snippet asChild(props)}<a {...props({ href: item.href })}><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>{/snippet}</NavigationMenuLink>{/each}</div>{/each}</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.
The demo puts an anchor inside NavigationMenuLink. SvelteKit routes plain links, so that is enough.
API Reference
Navigation Menu
No extra props in this demo. The rest is on the Navigation Menu page.
