Skip to content

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

Free

Navigation without Viewport Navigation Menu for React

Products and Company dropdowns that each open a short list of links in a panel under that trigger.

The bar shows Products and Company. Products lists Product 1 through Product 4. Company lists About, Team, Careers, and Contact. Each list opens under its own trigger.

Keep each panel under its own trigger when the lists are short. A Dropdown Menu fits one menu that is not part of a site bar. In React, Base UI moves between the triggers with Tab.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Navigation Menu anatomy: list, trigger, indicator, content, link

Usage

<div className="w-full max-w-md rounded-md border bg-background p-px">
  <NavigationMenu>
    <NavigationMenuList>
      {sections.map((section) => (
        <NavigationMenuItem key={section.trigger}>
          <NavigationMenuTrigger>{section.trigger}</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div className="flex w-48 flex-col">
              {section.items.map((item) => (
                <NavigationMenuLink
                  key={item.label}
                  render={<Link href={item.href} />}
                >
                  {item.label}
                </NavigationMenuLink>
              ))}
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
      ))}
    </NavigationMenuList>
  </NavigationMenu>
</div>

FAQ

How does each panel open under its own trigger?

Base UI always opens panels in one popup, which moves to the trigger that is open, so the demo passes no prop.

How wide is each panel?

w-48 on the column inside NavigationMenuContent.

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 the Next.js Link through render, as in render={<Link href="#" />}.

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. active on NavigationMenuLink sets it for you.

API Reference

Navigation Menu

No extra props in this demo. The rest is on the Navigation Menu page.

All 20 navigation menu examples