import * as NavigationMenu from "@ariaui/navigation-menu";

export default function Example() {
  return (
    <NavigationMenu.Root>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger />
          <NavigationMenu.Content>
            <NavigationMenu.Link />
            <NavigationMenu.Sub>
              <NavigationMenu.SubTrigger />
              <NavigationMenu.SubContent>
                <NavigationMenu.Link />
              </NavigationMenu.SubContent>
            </NavigationMenu.Sub>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.Root>
  );
}

API Reference

Root

The top-level navigation landmark. Coordinates open/close state across menus and manages keyboard navigation.

List

Container for the horizontal list of top-level menu Items.

Attribute	Values
role	menubar
aria-label	Recommended — describes the navigation region

Item

A single top-level menu entry containing a Trigger and Content (or a Link).

Prop	Type	Default
value	string	auto-generated id

Attribute	Values
role	none

Trigger

Button that opens its Content on click, Enter, Space, or ArrowDown.

Prop	Type	Default
asChild	boolean	false

Attribute	Values
role	menuitem
[data-state]	open \| closed
aria-haspopup	menu
aria-expanded	true when the menu is open
aria-controls	ID of the Content element

Content

Floating panel associated with a Trigger. Closes on outside click, Escape, or when focus moves outside the menu.

Prop	Type	Default
asChild	boolean	false

Attribute	Values
role	menu
[data-state]	open \| closed

Link

Focusable anchor inside Content or SubContent. Activates with Enter or click and participates in keyboard navigation.

Prop	Type	Default
asChild	boolean	false

Attribute	Values
role	menuitem

Sub

Container for a submenu composed of SubTrigger and SubContent.

SubTrigger

Trigger that opens a submenu on hover, click, or ArrowRight.

Prop	Type	Default
asChild	boolean	false

Attribute	Values
role	menuitem
[data-state]	open \| closed
aria-haspopup	menu
aria-expanded	true when the submenu is open

SubContent

Submenu panel containing nested Links. Positioned to the right of its SubTrigger.

Prop	Type	Default
asChild	boolean	false

Attribute	Values
role	menu
[data-state]	open \| closed

Keyboard

Shortcut	Action
`←`/`→`	Move focus between top-level Triggers along the List.
`Enter`/`Space`/`↓`	Open the focused menu and move focus to its first Link or SubTrigger.
`↓`/`↑`	Within an open menu, move focus to the next / previous focusable item.
`→`	On a SubTrigger, open the submenu and move focus to its first item.
`←`	Inside a submenu, close it and return focus to the SubTrigger.
`Home`/`End`	Move focus to the first / last item in the open menu.
`Enter`	Activate the focused Link.
`Esc`	Close the open menu and return focus to its Trigger.
`Tab`	Move focus out of the navigation menu, closing any open menu.
`A-Z`/`0-9`	Typeahead — move focus to the next item whose text starts with the typed characters.

Accessibility

The Navigation Menu follows the WAI-ARIA Menubar pattern adapted for site navigation:

Root renders as a semantic <nav> landmark.
List renders as role="menubar" and each Item uses role="none".
Trigger and SubTrigger expose aria-haspopup="menu", aria-expanded, and aria-controls.
Content and SubContent render as role="menu".
Link renders as role="menuitem" and participates in keyboard navigation.
Focus moves through triggers and open menus with the keyboard, and menus close when focus leaves the navigation.

Navigation Menu

Features

Installation

Examples