shadcn.io is an independent project built on shadcn/ui
The bar shows Resources. The panel lists Documentation, Guides & Tutorials, and Video Courses. Each row has an icon, a title, and a short description.
Add the description when the title alone could mean two things. A Sidebar fits if these links should stay on screen. In React, Base UI moves between the triggers with Tab.
Installation
Anatomy
Usage
<div className="w-full max-w-md rounded-md border bg-background p-px">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Resources</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="flex w-80 flex-col">
{resources.map((resource) => (
<NavigationMenuLink
className="items-start"
key={resource.label}
render={<Link href={resource.href} />}
>
<resource.icon aria-hidden="true" className="mt-0.5 size-4" />
<div className="flex flex-col gap-0.5">
<span className="font-medium">{resource.label}</span>
<span className="text-muted-foreground">
{resource.description}
</span>
</div>
</NavigationMenuLink>
))}
</div>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</div>FAQ
How are the icon and the text laid out?
The link takes items-start, so the icon lines up with the title, and the title and description stack in a column beside it. The description uses the muted text color.
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 wide is the panel?
w-80 on the column inside NavigationMenuContent, room for a title and a short description per line.
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.
