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 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>Platform Features</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid w-[600px] max-w-full grid-cols-2 gap-3 p-2">
{features.map((feature) => (
<NavigationMenuLink
className="items-start gap-2"
key={feature.label}
render={<Link href={feature.href} />}
>
<feature.icon aria-hidden="true" className="mt-0.5 size-5" />
<div className="flex flex-col gap-0.5">
<span className="font-medium">{feature.label}</span>
<span className="text-muted-foreground">
{feature.description}
</span>
</div>
</NavigationMenuLink>
))}
</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 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.
