# Navigation menu

A horizontal list of links for site or app navigation, with optional submenus. For a header that combines it with branding and actions, see [Top navigation](/components/top-navigation.md).

```tsx
// demo.tsx
import {NavigationMenu} from '@earendil-works/elanor-react';

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu.Root aria-label="Main">
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#" active>
            Overview
          </NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#">Projects</NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#">Members</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.Root>
  );
}
```

## Usage

```tsx
import {NavigationMenu} from '@earendil-works/elanor-react';

<NavigationMenu.Root aria-label="Main">
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="/" active />
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu.Root>;
```

`active` marks the current page with `aria-current="page"`. Give Root an `aria-label` when the page has more than one navigation landmark.

## Submenus

`NavigationMenu.Trigger` opens the item's `Content` in a shared popup. Add the Portal, Positioner, Popup, and Viewport parts once, after the List.

```tsx
// submenu.tsx
import {NavigationMenu, Stack} from '@earendil-works/elanor-react';

export default function NavigationMenuSubmenu() {
  return (
    <NavigationMenu.Root aria-label="Main">
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#" active>
            Overview
          </NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>
            Resources
            <NavigationMenu.Icon />
          </NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <Stack gap="xxSmall">
              <NavigationMenu.Link href="#">Guides</NavigationMenu.Link>
              <NavigationMenu.Link href="#">Changelog</NavigationMenu.Link>
              <NavigationMenu.Link href="#">Support</NavigationMenu.Link>
            </Stack>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.Portal>
        <NavigationMenu.Positioner align="start">
          <NavigationMenu.Popup>
            <NavigationMenu.Viewport />
          </NavigationMenu.Popup>
        </NavigationMenu.Positioner>
      </NavigationMenu.Portal>
    </NavigationMenu.Root>
  );
}
```

## API

### `NavigationMenu.Root`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'horizontal'` | - | Only horizontal is supported. |

Also accepts Base UI [`NavigationMenu.Root`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.List`

Accepts Base UI [`NavigationMenu.List`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Item`

Accepts Base UI [`NavigationMenu.Item`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Link`

Accepts Base UI [`NavigationMenu.Link`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Trigger`

Accepts Base UI [`NavigationMenu.Trigger`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Icon`

Accepts Base UI [`NavigationMenu.Icon`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Content`

Accepts Base UI [`NavigationMenu.Content`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Positioner`

Accepts Base UI [`NavigationMenu.Positioner`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Viewport`

Accepts Base UI [`NavigationMenu.Viewport`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Popup`

Accepts Base UI [`NavigationMenu.Popup`](https://base-ui.com/react/components/navigation-menu.md) props.

### `NavigationMenu.Portal`

Accepts Base UI [`NavigationMenu.Portal`](https://base-ui.com/react/components/navigation-menu.md) props.