Skip to content

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

Free

Mixed Links and Dropdowns Navigation Menu for Vue

A site menu that mixes Products and Support dropdowns with Pricing and About as plain links.

UI library: Ark UI

The bar shows Products, Pricing, About, and Support. Products lists Analytics, Marketing, and Commerce. Support lists Help Center, Contact Us, and Status. Pricing and About are links.

Mix links and dropdowns when only some items have children. If every item is one action, use a Menubar. 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>Products</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div class="flex w-48 flex-col">
            <NavigationMenuLink v-for="item in products" :asChild="true" :key="item.label">
              <a :href="item.href">{{ item.label }}</a>
            </NavigationMenuLink>
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink :asChild="true" :class="navigationMenuTriggerStyle()">
          <a href="#">Pricing</a>
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink :asChild="true" :class="navigationMenuTriggerStyle()">
          <a href="#">About</a>
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Support</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div class="flex w-48 flex-col">
            <NavigationMenuLink v-for="item in support" :asChild="true" :key="item.label">
              <a :href="item.href">{{ item.label }}</a>
            </NavigationMenuLink>
          </div>
<!-- The rest of the file is under Installation. -->

FAQ

How do plain links match the triggers?

Pricing and About take navigationMenuTriggerStyle() as their class, the same height, padding and hover as the triggers, so the row reads as one menu.

What is in each dropdown?

A w-48 column of NavigationMenuLinks: Analytics, Marketing and Commerce under Products; Help Center, Contact Us and Status under Support.

Can links and dropdowns go in any order?

Yes. Each is its own NavigationMenuItem, and the list keeps the order you write them in.

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 products", asChild, key="item.label", class="navigationMenuTriggerStyle()" and v-for="item in support". The rest is on the Navigation Menu page.

All 20 navigation menu examples