shadcn.io is an independent project built on shadcn/ui
The bar shows Solutions. The panel mixes solution cards, including Developer Platform and Design System, some with Popular or New badges, a webinar with Watch Now, and Start Building with two buttons.
Mix links, a promo, and a signup when the header is doing more than navigation. Keep a single list in a Dropdown Menu when that is all you need. 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>Solutions</NavigationMenuTrigger><NavigationMenuContent><div class="grid w-[800px] max-w-full grid-cols-[1fr_300px] gap-6 p-4"><div class="grid grid-cols-2 gap-x-6 gap-y-4">{#each solutions as solution (solution.title)}<NavigationMenuLink class="flex-col items-stretch justify-between gap-4">{#snippet asChild(props)}<a {...props({ href: "#" })}><div class="flex items-center justify-between gap-2"><solution.icon aria-hidden="true" class="size-5" />{#if solution.badge}<Badge variant={solution.badgeVariant}>{solution.badge}</Badge>{:else}{/if}</div><div class="flex flex-col gap-0.5"><span class="font-medium">{solution.title}</span><span class="text-muted-foreground">{solution.description}</span></div></a>{/snippet}</NavigationMenuLink>{/each}</div><div class="flex flex-col gap-4"><div class="overflow-hidden rounded-lg bg-muted"><div class="aspect-video bg-linear-to-br from-primary/20 to-primary/5"></div><div class="flex flex-col items-start gap-1 p-4"><Badge class="mb-1">Webinar</Badge><h4 class="font-semibold">Building at Scale</h4><p class="mb-2 text-muted-foreground text-sm">Learn how teams scale their applications</p><Button class="w-full" size="sm"><PlayIcon aria-hidden="true" data-icon="inline-start" />Watch Now</Button></div></div><div class="flex flex-col gap-1 rounded-lg border bg-card p-4"><h4 class="font-semibold">Start Building</h4><p class="mb-2 text-muted-foreground text-sm">Get started with our platform in minutes</p><div class="flex flex-col gap-2"><Button class="w-full" size="sm">Create Account<ArrowRightIcon aria-hidden="true" class="rtl:rotate-180" data-icon="inline-end" /></Button><Button class="w-full" size="sm" variant="outline">View Docs</Button></div></div></div></div></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu></div>FAQ
How are the solution cards built?
Each card is a NavigationMenuLink with flex-col: the icon and an optional Badge on top, the title and description below.
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.
Badge
Sets variant={solution.badgeVariant}. The rest is on the Badge page.
Button
Sets size="sm" and variant="outline". The rest is on the Button page.
