shadcn.io is an independent project built on shadcn/ui
The bar shows Resources. The panel lists Documentation, Video Tutorials, and Blog, a Featured guide called Complete Platform Guide with Download Free, and a webinar with Register Now.
Use the panel when a download or a signup should ride along with the links. A Dialog fits better for a form that must be finished. In Svelte, 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-[600px] max-w-full flex-col gap-4 p-2"><div class="grid grid-cols-[1fr_240px] gap-4"><div class="flex flex-col gap-1">{#each resources as resource (resource.label)}<NavigationMenuLink class="items-start gap-2">{#snippet asChild(props)}<a {...props({ href: resource.href })}><resource.icon aria-hidden="true" class="mt-0.5 size-5" /><div class="flex flex-col gap-0.5"><div class="flex items-center gap-2"><span class="font-medium">{resource.label}</span>{#if resource.badge}<Badge variant="secondary">{resource.badge}</Badge>{:else}{/if}</div><span class="text-muted-foreground">{resource.description}</span></div></a>{/snippet}</NavigationMenuLink>{/each}</div><div class="flex flex-col gap-3 rounded-lg bg-muted p-4"><div class="aspect-video overflow-hidden rounded bg-background"></div><div class="flex flex-col items-start gap-2"><Badge>Featured</Badge><h4 class="font-semibold">Complete Platform Guide</h4><p class="text-muted-foreground text-xs">80-page comprehensive guide to mastering our platform</p></div><Button class="w-full" size="sm"><DownloadIcon aria-hidden="true" data-icon="inline-start" />Download Free</Button></div></div><div class="flex items-center justify-between gap-4 rounded-lg bg-primary/5 p-4"><div class="flex flex-col gap-1"><h4 class="font-semibold">Webinar: Advanced Strategies</h4><p class="text-muted-foreground text-sm">Join our next live session on Friday at 2 PM EST</p></div><Button size="sm"><PlayIcon aria-hidden="true" data-icon="inline-start" />Register Now</Button></div></div></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu></div>FAQ
How is Video Tutorials marked Free?
Its data has a badge, rendered as a secondary Badge next to the name. Links without one show only the name.
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="secondary". The rest is on the Badge page.
Button
Sets size="sm". The rest is on the Button page.
