Skip to content

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

Free

Feature Categories Navigation Menu for Vue

A Solutions dropdown with six category headings in two columns, and two described links under each heading.

UI library: Ark UI

The bar shows Solutions. The panel is two columns of category headings, six in all, and each heading has two links with descriptions.

Group links under headings when the panel would otherwise be one long list. Tabs fit better when each group is a different view of one page. In Vue, Ark UI closes the open panel when you press Escape.

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>Solutions</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div class="grid w-[600px] max-w-full grid-flow-col grid-cols-2 grid-rows-3 gap-x-6 gap-y-3 p-2">
            <div v-for="category in categories" class="flex flex-col" :key="category.title">
              <div class="mb-1 flex items-center gap-2 px-2">
                <component :is="category.icon" aria-hidden="true" class="size-5 text-primary" />
                <h4 class="font-semibold text-sm">{{ category.title }}</h4>
              </div>
              <NavigationMenuLink
                v-for="item in category.items"
                :asChild="true"
                class="flex-col items-start gap-0.5"
                :key="item.label"
              >
                <a :href="item.href">
                  <span class="font-medium">{{ item.label }}</span>
                  <span class="text-muted-foreground">{{ item.description }}</span>
                </a>
              </NavigationMenuLink>
            </div>
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>

FAQ

How do the categories fill two columns?

The panel is a grid with grid-flow-col and three rows, so the first three categories fill the first column and the next three the second.

Are the category titles links?

No. They are h4 headings with an icon in the primary color; only the two entries under each are NavigationMenuLinks.

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 as-child, and the demo puts an anchor inside. Put RouterLink or NuxtLink there instead.

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 v-for="item in category.items", asChild and key="item.label". The rest is on the Navigation Menu page.

All 20 navigation menu examples