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 Solid, 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>Resources</NavigationMenuTrigger>
<NavigationMenuContent>
<div class="flex w-80 flex-col">
{resources.map(resource => <NavigationMenuLink asChild={props => <a {...props()} href={resource.href}>
<Dynamic component={resource.icon} aria-hidden="true" class="mt-0.5 size-4" />
<div class="flex flex-col gap-0.5">
<span class="font-medium">{resource.label}</span>
<span class="text-muted-foreground">
{resource.description}
</span>
</div>
</a>} class="items-start" />)}
</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 asChild, a function that renders your router's A with the props it gets.
API Reference
Navigation Menu
Sets asChild and props. The rest is on the Navigation Menu page.
