Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Resources with Lead Magnets Navigation Menu for Solid

A Resources dropdown with Documentation, Video Tutorials, and Blog, plus a featured guide and a webinar signup.

UI library: Ark 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 Solid, Ark UI moves between the triggers with Tab.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Navigation Menu anatomy: list, trigger, indicator, content, link

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">
                  {resources.map(resource => <NavigationMenuLink asChild={props => <a {...props()} href={resource.href}>
                        <Dynamic component={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>
                            {resource.badge ? <Badge variant="secondary">
                                {resource.badge}
                              </Badge> : null}
                          </div>
                          <span class="text-muted-foreground">
                            {resource.description}
                          </span>
                        </div>
                      </a>} class="items-start gap-2" />)}
                </div>
                <div class="flex flex-col gap-3 rounded-lg bg-muted p-4">
                  <div class="aspect-video overflow-hidden rounded bg-background" />
                  <div class="flex flex-col items-start gap-2">
                    <Badge>Featured</Badge>
                    <h4 class="font-semibold">Complete Platform Guide</h4>
{/* The rest of the file is under Installation. */}

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.

Do Download Free and Register Now do anything?

Not in the demo: they are Buttons with no handler. Link them to your download and registration pages.

What happens on narrow screens?

The panel is w-[600px] with max-w-full, so it never grows past the screen, but its columns get tight. Below the md breakpoint, show the same links in a Sheet or a Drawer instead.

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.

How does the menu work from the keyboard?

Tab moves between the triggers and the links, Enter or Space opens a trigger's panel, and Escape closes it and returns focus to the trigger. The root is a nav, so screen readers list it as a navigation landmark.

How do I mark the current page?

Set aria-current="page" on the NavigationMenuLink that matches the route, and style it with the aria-[current=page]: variant.

API Reference

Navigation Menu

Sets asChild and props. 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.

All 20 navigation menu examples