shadcn.io is an independent project built on shadcn/ui
The bar shows Features. The panel lists Components, Performance, Security, and Accessibility, and each link starts with an icon. There is no description under the titles.
Add icons when the titles are short and a picture helps scanning. Descriptions belong on the link if the title is not enough, which a Dropdown Menu can do for one menu. In Svelte, Ark UI closes the open panel when you press Escape.
Installation
Anatomy
Usage
<div class="w-full max-w-md rounded-md border bg-background p-px"><NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Features</NavigationMenuTrigger><NavigationMenuContent><div class="flex w-56 flex-col">{#each features as feature (feature.label)}<NavigationMenuLink>{#snippet asChild(props)}<a {...props({ href: feature.href })}><feature.icon aria-hidden="true" /><span class="font-medium">{feature.label}</span></a>{/snippet}</NavigationMenuLink>{/each}</div></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu></div>FAQ
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 big are the icons?
The link styles size an icon without a size class to size-4 and put a small gap after it, so the demo needs no classes on the icon.
How wide is the panel?
w-56 on the column inside NavigationMenuContent. Widen it if your labels are longer.
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.
