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 Svelte, 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">{#each features as feature (feature.label)}<NavigationMenuLink class="items-start gap-2">{#snippet asChild(props)}<a {...props({ href: feature.href })}><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>{/snippet}</NavigationMenuLink>{/each}</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.
The demo puts an anchor inside NavigationMenuLink. SvelteKit routes plain links, so that is enough.
API Reference
Navigation Menu
No extra props in this demo. The rest is on the Navigation Menu page.
