shadcn.io is an independent project built on shadcn/ui
The bar shows Platform Features. The panel is two columns of cards: Lightning Fast, Enterprise Security, Advanced Analytics, Global CDN, Data Privacy, and Mobile Ready.
Use cards when each feature needs a short pitch in the header. A Card on the page is better when the pitch is the whole section. In Solid, 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>Platform Features</NavigationMenuTrigger>
<NavigationMenuContent>
<div class="grid w-[600px] max-w-full grid-cols-2 gap-3 p-2">
{features.map(feature => <NavigationMenuLink asChild={props => <a {...props()} href={feature.href}>
<Dynamic component={feature.icon} aria-hidden="true" class="mt-0.5 size-5" />
<div class="flex flex-col gap-0.5">
<span class="font-medium">{feature.label}</span>
<span class="text-muted-foreground">
{feature.description}
</span>
</div>
</a>} class="items-start gap-2" />)}
</div>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</div>FAQ
How is the grid built?
The panel is a grid-cols-2 grid with gap-3, and each cell is a NavigationMenuLink with items-start, so the icon sits at the top beside the name and description.
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 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.
