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, Ark 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
asChild
className="items-start"
key={resource.label}
>
<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>
</Link>
</NavigationMenuLink>
))}
</div>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
{/* The rest of the file is under Installation. */}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 asChild, and the demo puts the Next.js Link inside it.
API Reference
Navigation Menu
Sets asChild. The rest is on the Navigation Menu page.
