Skip to content

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

Free

Multi-level Nested Navigation Navigation Menu for Vue

A Products dropdown with Development and Infrastructure, each listing subcategories and indented links under them.

UI library: Ark UI

The bar shows Products. The panel has two columns, Development and Infrastructure. Each lists subcategories such as Frontend and Hosting, with more links indented under them.

Keep the third level indented in the same panel so you do not need flyout menus. A Tree View fits when that nesting is the page, not a header. In Vue, 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>Products</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div class="grid w-[600px] max-w-full grid-cols-2 gap-4 p-2">
            <div v-for="category in categories" class="flex flex-col gap-1" :key="category.title">
              <h4 class="mb-2 px-2 font-semibold text-sm">{{ category.title }}</h4>
              <div
                v-for="subcategory in category.subcategories"
                class="flex flex-col gap-1"
                :key="subcategory.title"
              >
                <NavigationMenuLink :asChild="true" class="justify-between font-medium">
                  <a href="#">
                    {{ subcategory.title }}<ChevronRightIcon aria-hidden="true" class="size-4 rtl:rotate-180" />
                  </a>
                </NavigationMenuLink>
                <div class="ms-4 flex flex-col gap-1 border-s ps-4">
                  <NavigationMenuLink v-for="item in subcategory.items" :asChild="true" :key="item">
                    <a href="#">{{ item }}</a>
                  </NavigationMenuLink>
                </div>
              </div>
            </div>
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>

FAQ

How are the levels shown?

Categories are headings, subcategories are links with a chevron, and their items sit below in a column with ms-4, ps-4 and a start border, so the nesting reads in both directions.

Can the subcategories open their own flyouts?

Not in this demo: every level is visible at once, which is easier to use than nested hover menus. For deeper trees, link the subcategory to its own page.

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

All 20 navigation menu examples