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 React, Base UI closes the open panel when you press Escape.
Installation
Anatomy
Usage
<div className="w-full max-w-md rounded-md border bg-background p-px">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Features</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="flex w-56 flex-col">
{features.map((feature) => (
<NavigationMenuLink
key={feature.label}
render={<Link href={feature.href} />}
>
<feature.icon aria-hidden="true" />
<span className="font-medium">{feature.label}</span>
</NavigationMenuLink>
))}
</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.
NavigationMenuLink takes the Next.js Link through render, as in render={<Link href="#" />}.
API Reference
Navigation Menu
No extra props in this demo. The rest is on the Navigation Menu page.
