Skip to main content
A versatile navigation component built on Base UI that provides a rich menu experience with dropdown content, keyboard navigation, and smooth transitions.

​
Installation

npx shadcn@latest add @eo-n/navigation-menu

​
Usage

Import all parts and piece them together: 
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";

​
Basic Example

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

​
Complete Example

import Link from "next/link";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Home</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-2 md:w-[400px] lg:w-[500px]">
              <li>
                <NavigationMenuLink
                  render={
                    <Link href="/docs" className="flex flex-col gap-2 p-2">
                      <div className="text-sm font-medium">Introduction</div>
                      <p className="text-sm text-muted-foreground">
                        Collection of accessible UI components.
                      </p>
                    </Link>
                  }
                />
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            render={
              <Link className={navigationMenuTriggerStyle()} href="/docs">
                Docs
              </Link>
            }
          />
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

​
API Reference

​
NavigationMenu

The root component that wraps all navigation menu items.
​
contentProps
NavigationMenuPositionerProps
Props to pass to the internal positioner component. Includes positioning options like sideOffset and collisionPadding.
​
className
string
Additional CSS classes to apply to the navigation menu root.

​
NavigationMenuList

Wrapper for navigation menu items.
​
className
string
Additional CSS classes to apply to the list.

​
NavigationMenuItem

Container for a single navigation menu item with optional content.
​
className
string
Additional CSS classes to apply to the menu item.

​
NavigationMenuTrigger

Button that triggers the dropdown content.
​
className
string
Additional CSS classes to apply to the trigger button.

​
NavigationMenuContent

The dropdown content that appears when a trigger is activated.
​
className
string
Additional CSS classes to apply to the content container.

​
NavigationMenuLink

A link item within the navigation menu.
​
render
ReactElement
Custom render function for the link element.
​
className
string
Additional CSS classes to apply to the link.

​
NavigationMenuViewport

Viewport that contains all dropdown content with smooth transitions.
​
contentProps
object
Configuration for positioning:
  • sideOffset (number): Offset from the trigger element (default: 6)
  • collisionPadding (object): Padding for collision detection (default: {top: 5, bottom: 5, left: 20, right: 20})

​
navigationMenuTriggerStyle

A CVA function that returns the default trigger button styles. Use this for standalone links that should match the trigger appearance: 
<NavigationMenuLink
  render={
    <Link className={navigationMenuTriggerStyle()} href="/docs">
      Documentation
    </Link>
  }
/>

​
Features

  • Keyboard Navigation: Full keyboard support with arrow keys and tab navigation
  • Smooth Animations: Built-in transitions for opening and closing content
  • Flexible Layouts: Content supports any layout with CSS Grid or Flexbox
  • Nested Menus: Support for nested sub-menus with NavigationSubMenuTrigger
  • Collision Detection: Automatic positioning adjustments to stay within viewport
  • Accessible: Built on Base UI primitives with ARIA attributes

​
Accessibility

  • Uses semantic HTML with proper ARIA attributes
  • Full keyboard navigation support
  • Focus management for keyboard users
  • Screen reader announcements for state changes

​
Examples

For additional examples including nested sub-menus, refer to the component documentation in the EoN UI library.

Build docs developers (and LLMs) love

Get started for freeTalk to us