A
Aether UI

Navigation Menu

A full navigation menu with animated content panels and keyboard support. Supports nested content areas that slide in on hover or focus, built on Radix UI NavigationMenu.

Built on Radix UI.

  • ✓Supports nested content panels
  • ✓Animated show/hide with slide transitions
  • ✓Keyboard accessible (arrow keys, Escape)
  • ✓Built on Radix UI NavigationMenu

import { Navigation Menu }from "@aetherstack/ui"

navigation menu.tsx
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu"

export function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-2 p-4 w-[280px]">
              <li>
                <NavigationMenuLink href="/ui" className="block rounded-md p-2 hover:bg-muted">
                  <div className="text-sm font-medium">Aether UI</div>
                  <div className="text-xs text-muted-foreground">Design system primitives</div>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink className={navTriggerStyle} href="/docs">
            Docs
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Usage

Simple link list

Use navTriggerStyle for standalone links with consistent hover treatment.

With content panel

Use NavigationMenuContent to show a rich dropdown panel.

Props

PropTypeDefaultDescription

NavigationMenu

PropTypeDefaultDescription
valuestring—Controlled active item value.
onValueChange(value: string) => void—Callback when the active item changes.
classNamestring—Additional Tailwind classes on the root element.

NavigationMenuTrigger

PropTypeDefaultDescription
classNamestring—Additional Tailwind classes.

NavigationMenuLink

PropTypeDefaultDescription
asChildboolean—Merge props onto child element instead of rendering an anchor.
activeboolean—Marks the link as the current page (aria-current='page').

navigationMenuTriggerStyle

PropTypeDefaultDescription
()string—Utility function — returns a className string for standalone NavigationMenuLink items.

* Required props

Accessibility

  • →NavigationMenu implements the ARIA navigation menu pattern with role='navigation'.
  • →Arrow keys navigate between top-level items; Enter or Space opens sub-content.
  • →Escape closes open content panels and returns focus to the trigger.
  • →Use NavigationMenuLink active prop to set aria-current='page' on the active route.