Skip to content

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

Free

Full Mega Menu Navigation Menu for Vue

A wide Platform menu with feature, resource, and company columns, plus Watch Tutorial and Contact Sales.

UI library: Ark UI

The bar shows Platform. The panel is a wide grid of feature, resource, and company links, a Getting Started card with Watch Tutorial, and a help card with Contact Sales.

Use the full panel when the header is the main way around a large site. A Sidebar fits an app that should keep that map on screen. 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>Platform</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div class="grid w-[900px] max-w-full grid-cols-[2fr_1fr_1fr] gap-6 p-4">
            <div class="flex flex-col gap-4">
              <div v-for="group in featureGroups" class="flex flex-col gap-1" :key="group.title">
                <h4 class="mb-2 px-2 font-semibold text-muted-foreground text-sm">
                  {{ group.title }}
                </h4>
                <NavigationMenuLink
                  v-for="feature in group.items"
                  :asChild="true"
                  class="items-start gap-2"
                  :key="feature.label"
                >
                  <a :href="feature.href">
                    <component :is="feature.icon" aria-hidden="true" class="size-5" />
                    <div class="flex flex-col gap-0.5">
                      <span class="font-medium">{{ feature.label }}</span>
                      <span class="text-muted-foreground">
                        {{ feature.description }}
                      </span>
                    </div>
                  </a>
                </NavigationMenuLink>
              </div>
            </div>
            <div class="flex flex-col gap-4">
<!-- The rest of the file is under Installation. -->

FAQ

How are the columns laid out?

A three-column grid, grid-cols-[2fr_1fr_1fr]: the feature groups take the widest column, the resource and company links the middle, and the two panels the last.

How are the groups built?

From lists at the top of the file: two feature groups with descriptions and two link groups, each with a title. Resource links have icons; company links don't.

What happens on narrow screens?

The panel is w-[900px] 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="feature in group.items", asChild, key="feature.label", v-for="item in group.items" and key="item.label". The rest is on the Navigation Menu page.

Button

Sets size="sm" and variant="outline". The rest is on the Button page.

All 20 navigation menu examples