Skip to content

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

Free

Features with Badges Navigation Menu for Vue

A What's New dropdown of six features, each with an icon, a description, and a New, Beta, Preview, or Pro badge.

UI library: Ark UI

The bar shows What's New. The panel lists six features, including AI Assistant, Instant Deploy, and Premium Templates. Each row has an icon, a description, and a badge such as New, Beta, Preview, or Pro.

Use the badge for what changed, not for every link. A Badge next to a page title is enough when there is no menu. 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>What's New</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div class="flex w-[400px] max-w-full flex-col gap-1 p-2">
            <NavigationMenuLink
              v-for="feature in features"
              :asChild="true"
              class="items-start gap-2"
              :key="feature.label"
            >
              <a :href="feature.href">
                <component :is="feature.icon" aria-hidden="true" class="mt-0.5 size-5" />
                <div class="flex flex-1 flex-col gap-0.5">
                  <div class="flex items-center gap-2">
                    <span class="font-medium">{{ feature.label }}</span>
                    <Badge :variant="feature.badgeVariant">{{ feature.badge }}</Badge>
                  </div>
                  <span class="text-muted-foreground">{{ feature.description }}</span>
                </div>
              </a>
            </NavigationMenuLink>
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>

FAQ

How are the badges chosen?

Each feature has a badge label and a variant in the data: the default fill for New, secondary for Beta, outline for Preview and Pro.

Are the badges read out?

Yes, as part of the link's text, after the name, such as AI Assistant New. Keep them to one short word.

How are the icons rendered?

Each item's icon is a Lucide component stored in the data, rendered inside the link and hidden from assistive tech, since the label beside it names the link.

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 features", asChild and key="feature.label". The rest is on the Navigation Menu page.

Badge

Sets variant="feature.badgeVariant". The rest is on the Badge page.

All 20 navigation menu examples