# Navigation Menu

URL: https://ark-ui.com/docs/components/navigation-menu
LLM: https://ark-ui.com/llms.txt/components/navigation-menu

A collection of links and menus for website navigation.

---



## Anatomy



```tsx
<NavigationMenu.Root>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger />
      <NavigationMenu.ItemIndicator />
      <NavigationMenu.Content>
        <NavigationMenu.Link />
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Indicator>
      <NavigationMenu.Arrow />
    </NavigationMenu.Indicator>
  </NavigationMenu.List>
  <NavigationMenu.ViewportPositioner>
    <NavigationMenu.Viewport />
  </NavigationMenu.ViewportPositioner>
</NavigationMenu.Root>
```

## Examples

```tsx
import { NavigationMenu } from '@ark-ui/react/navigation-menu'
import {
  AccessibilityIcon,
  ChevronDownIcon,
  ClapperboardIcon,
  LayersIcon,
  ListChecksIcon,
  PaletteIcon,
  RocketIcon,
  SparklesIcon,
} from 'lucide-react'
import styles from 'styles/navigation-menu.module.css'

const overviewSections = [
  {
    label: 'Get started',
    links: [
      { href: '#quick-start', title: 'Quick Start', description: 'Install and assemble', icon: RocketIcon },
      { href: '#styling', title: 'Styling', description: 'CSS, CSS-in-JS, or utilities', icon: PaletteIcon },
    ],
  },
  {
    label: 'Learn',
    links: [
      {
        href: '#accessibility',
        title: 'Accessibility',
        description: 'Keyboard and ARIA support',
        icon: AccessibilityIcon,
      },
      { href: '#releases', title: 'Releases', description: "What's new in Ark UI", icon: SparklesIcon },
    ],
  },
]

const guideLinks = [
  { href: '#animation', title: 'Animation', description: 'CSS or JavaScript', icon: ClapperboardIcon },
  { href: '#composition', title: 'Composition', description: 'Replace and compose parts', icon: LayersIcon },
  { href: '#forms', title: 'Forms', description: 'Native and library forms', icon: ListChecksIcon },
]

export const Basic = () => (
  <NavigationMenu.Root className={styles.Root}>
    <NavigationMenu.List className={styles.List}>
      <NavigationMenu.Item className={styles.Item} value="overview">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Overview
          <span className={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <div className={styles.MenuColumns}>
            {overviewSections.map((section) => (
              <div key={section.label} className={styles.MenuSection}>
                <span className={styles.MenuLabel}>{section.label}</span>
                {section.links.map((item) => (
                  <NavigationMenu.Link key={item.href} className={styles.LinkCard} href={item.href}>
                    <span className={styles.LinkIcon}>
                      <item.icon />
                    </span>
                    <span className={styles.LinkCopy}>
                      <span className={styles.LinkTitle}>{item.title}</span>
                      <span className={styles.LinkDescription}>{item.description}</span>
                    </span>
                  </NavigationMenu.Link>
                ))}
              </div>
            ))}
          </div>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="guides">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Guides
          <span className={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <div className={styles.MenuSection} data-single="">
            <span className={styles.MenuLabel}>Guides</span>
            {guideLinks.map((item) => (
              <NavigationMenu.Link key={item.href} className={styles.LinkCard} href={item.href}>
                <span className={styles.LinkIcon}>
                  <item.icon />
                </span>
                <span className={styles.LinkCopy}>
                  <span className={styles.LinkTitle}>{item.title}</span>
                  <span className={styles.LinkDescription}>{item.description}</span>
                </span>
              </NavigationMenu.Link>
            ))}
          </div>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="docs">
        <NavigationMenu.Link className={styles.Link} href="https://ark-ui.com">
          Documentation
        </NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

### Viewport

Render `NavigationMenu.Viewport` to share one animated panel across menu items. The viewport resizes as you move between
triggers.

```tsx
import { NavigationMenu } from '@ark-ui/react/navigation-menu'
import {
  AccessibilityIcon,
  ChevronDownIcon,
  ClapperboardIcon,
  LayersIcon,
  ListChecksIcon,
  PaletteIcon,
  RocketIcon,
  SparklesIcon,
} from 'lucide-react'
import styles from 'styles/navigation-menu-viewport.module.css'

const overviewSections = [
  {
    label: 'Get started',
    links: [
      { href: '#quick-start', title: 'Quick Start', description: 'Install and assemble', icon: RocketIcon },
      { href: '#styling', title: 'Styling', description: 'CSS, CSS-in-JS, or utilities', icon: PaletteIcon },
    ],
  },
  {
    label: 'Learn',
    links: [
      {
        href: '#accessibility',
        title: 'Accessibility',
        description: 'Keyboard and ARIA support',
        icon: AccessibilityIcon,
      },
      { href: '#releases', title: 'Releases', description: "What's new in Ark UI", icon: SparklesIcon },
    ],
  },
]

const guideLinks = [
  { href: '#animation', title: 'Animation', description: 'CSS or JavaScript', icon: ClapperboardIcon },
  { href: '#composition', title: 'Composition', description: 'Replace and compose parts', icon: LayersIcon },
  { href: '#forms', title: 'Forms', description: 'Native and library forms', icon: ListChecksIcon },
]

export const Viewport = () => (
  <div className={styles.Frame}>
    <NavigationMenu.Root className={styles.Root}>
      <NavigationMenu.List className={styles.List}>
        <NavigationMenu.Item className={styles.Item} value="overview">
          <NavigationMenu.Trigger className={styles.Trigger}>
            Overview
            <span className={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className={styles.Content}>
            <div className={styles.MenuColumns}>
              {overviewSections.map((section) => (
                <div key={section.label} className={styles.MenuSection}>
                  <span className={styles.MenuLabel}>{section.label}</span>
                  {section.links.map((item) => (
                    <NavigationMenu.Link key={item.href} className={styles.LinkCard} href={item.href}>
                      <span className={styles.LinkIcon}>
                        <item.icon />
                      </span>
                      <span className={styles.LinkCopy}>
                        <span className={styles.LinkTitle}>{item.title}</span>
                        <span className={styles.LinkDescription}>{item.description}</span>
                      </span>
                    </NavigationMenu.Link>
                  ))}
                </div>
              ))}
            </div>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item className={styles.Item} value="guides">
          <NavigationMenu.Trigger className={styles.Trigger}>
            Guides
            <span className={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className={styles.Content}>
            <div className={styles.MenuSection} data-single="">
              <span className={styles.MenuLabel}>Guides</span>
              {guideLinks.map((item) => (
                <NavigationMenu.Link key={item.href} className={styles.LinkCard} href={item.href}>
                  <span className={styles.LinkIcon}>
                    <item.icon />
                  </span>
                  <span className={styles.LinkCopy}>
                    <span className={styles.LinkTitle}>{item.title}</span>
                    <span className={styles.LinkDescription}>{item.description}</span>
                  </span>
                </NavigationMenu.Link>
              ))}
            </div>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item className={styles.Item} value="docs">
          <NavigationMenu.Link className={styles.Link} href="https://ark-ui.com">
            Documentation
          </NavigationMenu.Link>
        </NavigationMenu.Item>

        <NavigationMenu.Indicator className={styles.Indicator}>
          <NavigationMenu.Arrow className={styles.Arrow} />
        </NavigationMenu.Indicator>
      </NavigationMenu.List>

      <NavigationMenu.ViewportPositioner className={styles.ViewportPositioner} align="start">
        <NavigationMenu.Viewport className={styles.Viewport} />
      </NavigationMenu.ViewportPositioner>
    </NavigationMenu.Root>
  </div>
)
```

### Current link

Pass the `current` prop to the link that represents the page the user is on. It renders `aria-current="page"` for
assistive technology and a `data-current` attribute for styling.

```tsx
import { NavigationMenu } from '@ark-ui/react/navigation-menu'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/navigation-menu.module.css'

export const CurrentLink = () => (
  <NavigationMenu.Root className={styles.Root}>
    <NavigationMenu.List className={styles.List}>
      <NavigationMenu.Item className={styles.Item} value="home">
        <NavigationMenu.Link className={styles.Link} href="#home" current>
          Home
        </NavigationMenu.Link>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="products">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Products
          <span className={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <NavigationMenu.Link className={styles.ContentLink} href="#analytics">
            Analytics
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#commerce">
            Commerce
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#payments">
            Payments
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="about">
        <NavigationMenu.Link className={styles.Link} href="#about">
          About
        </NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

### Vertical

Set `orientation="vertical"` on the root to build sidebar-style navigation. Panels open to the side, and the keyboard
model adapts: ArrowUp and ArrowDown move between triggers, ArrowRight enters the open panel.

```tsx
import { NavigationMenu } from '@ark-ui/react/navigation-menu'
import { ChevronRightIcon } from 'lucide-react'
import styles from 'styles/navigation-menu-vertical.module.css'

export const Vertical = () => (
  <NavigationMenu.Root className={styles.Root} orientation="vertical">
    <NavigationMenu.List className={styles.List}>
      <NavigationMenu.Item className={styles.Item} value="products">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Products
          <span className={styles.TriggerIcon}>
            <ChevronRightIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <NavigationMenu.Link className={styles.ContentLink} href="#analytics">
            Analytics
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#commerce">
            Commerce
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#payments">
            Payments
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="resources">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Resources
          <span className={styles.TriggerIcon}>
            <ChevronRightIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <NavigationMenu.Link className={styles.ContentLink} href="#blog">
            Blog
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#changelog">
            Changelog
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#support">
            Support
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="docs">
        <NavigationMenu.Link className={styles.Link} href="#docs">
          Documentation
        </NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

### Indicator

Render `NavigationMenu.Indicator` inside the list to highlight the active trigger, tab-style. The machine exposes
`--trigger-x` and `--trigger-width` CSS variables, so the indicator slides between triggers with a plain CSS transition.
For a static per-item marker, use `NavigationMenu.ItemIndicator` instead.

```tsx
import { NavigationMenu } from '@ark-ui/react/navigation-menu'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/navigation-menu.module.css'

export const Indicator = () => (
  <NavigationMenu.Root className={styles.Root}>
    <NavigationMenu.List className={styles.List}>
      <NavigationMenu.Item className={styles.Item} value="products">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Products
          <span className={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <NavigationMenu.Link className={styles.ContentLink} href="#analytics">
            Analytics
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#commerce">
            Commerce
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#payments">
            Payments
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="resources">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Resources
          <span className={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <NavigationMenu.Link className={styles.ContentLink} href="#blog">
            Blog
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#changelog">
            Changelog
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#support">
            Support
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="docs">
        <NavigationMenu.Link className={styles.Link} href="#docs">
          Documentation
        </NavigationMenu.Link>
      </NavigationMenu.Item>

      <NavigationMenu.Indicator className={styles.Indicator} />
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

### Controlled

Use the `value` and `onValueChange` props to control the active menu item.

```tsx
import { NavigationMenu } from '@ark-ui/react/navigation-menu'
import { ChevronDownIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/navigation-menu.module.css'

export const Controlled = () => {
  const [value, setValue] = useState<string>('')

  return (
    <NavigationMenu.Root className={styles.Root} value={value} onValueChange={(e) => setValue(e.value)}>
      <output>value: {value}</output>
      <NavigationMenu.List className={styles.List}>
        <NavigationMenu.Item className={styles.Item} value="features">
          <NavigationMenu.Trigger className={styles.Trigger}>
            Features
            <span className={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className={styles.Content}>
            <NavigationMenu.Link className={styles.ContentLink} href="#overview">
              Overview
            </NavigationMenu.Link>
            <NavigationMenu.Link className={styles.ContentLink} href="#features">
              Features
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item className={styles.Item} value="docs">
          <NavigationMenu.Trigger className={styles.Trigger}>
            Documentation
            <span className={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className={styles.Content}>
            <NavigationMenu.Link className={styles.ContentLink} href="#introduction">
              Introduction
            </NavigationMenu.Link>
            <NavigationMenu.Link className={styles.ContentLink} href="#installation">
              Installation
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item className={styles.Item} value="about">
          <NavigationMenu.Link className={styles.Link} href="#about">
            About
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.Root>
  )
}
```

### Root Provider

An alternative way to control the navigation menu is to use the `RootProvider` component and the `useNavigationMenu`
hook. This way you can access the state and methods from outside the component.

```tsx
import { NavigationMenu, useNavigationMenu } from '@ark-ui/react/navigation-menu'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/navigation-menu.module.css'

export const RootProvider = () => {
  const navigationMenu = useNavigationMenu()

  return (
    <NavigationMenu.RootProvider value={navigationMenu} className={styles.Root}>
      <output>value: {navigationMenu.value}</output>
      <NavigationMenu.List className={styles.List}>
        <NavigationMenu.Item className={styles.Item} value="features">
          <NavigationMenu.Trigger className={styles.Trigger}>
            Features
            <span className={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className={styles.Content}>
            <NavigationMenu.Link className={styles.ContentLink} href="#overview">
              Overview
            </NavigationMenu.Link>
            <NavigationMenu.Link className={styles.ContentLink} href="#features">
              Features
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item className={styles.Item} value="docs">
          <NavigationMenu.Trigger className={styles.Trigger}>
            Documentation
            <span className={styles.TriggerIcon}>
              <ChevronDownIcon />
            </span>
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className={styles.Content}>
            <NavigationMenu.Link className={styles.ContentLink} href="#introduction">
              Introduction
            </NavigationMenu.Link>
            <NavigationMenu.Link className={styles.ContentLink} href="#installation">
              Installation
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item className={styles.Item} value="about">
          <NavigationMenu.Link className={styles.Link} href="#about">
            About
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.RootProvider>
  )
}
```

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

### Context

Access the navigation menu's state with `NavigationMenu.Context` or the `useNavigationMenuContext` hook:

```tsx
import { NavigationMenu } from '@ark-ui/react/navigation-menu'
import { ChevronDownIcon } from 'lucide-react'
import styles from 'styles/navigation-menu.module.css'

export const Context = () => (
  <NavigationMenu.Root className={styles.Root}>
    <NavigationMenu.Context>{(api) => <output>value: {api.value || 'none'}</output>}</NavigationMenu.Context>
    <NavigationMenu.List className={styles.List}>
      <NavigationMenu.Item className={styles.Item} value="features">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Features
          <span className={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <NavigationMenu.Link className={styles.ContentLink} href="#overview">
            Overview
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#features">
            Features
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="docs">
        <NavigationMenu.Trigger className={styles.Trigger}>
          Documentation
          <span className={styles.TriggerIcon}>
            <ChevronDownIcon />
          </span>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content className={styles.Content}>
          <NavigationMenu.Link className={styles.ContentLink} href="#introduction">
            Introduction
          </NavigationMenu.Link>
          <NavigationMenu.Link className={styles.ContentLink} href="#installation">
            Installation
          </NavigationMenu.Link>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item className={styles.Item} value="about">
        <NavigationMenu.Link className={styles.Link} href="#about">
          About
        </NavigationMenu.Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
)
```

## Guides

### Custom links

Use the `asChild` prop to render `NavigationMenu.Link` as your framework's link component for client-side routing.

```tsx
import { Link as RouterLink } from 'react-router-dom'
import { NavigationMenu } from '@ark-ui/<framework>/navigation-menu'

export const MenuLink = (props: NavigationMenu.LinkProps) => {
  return (
    <NavigationMenu.Link {...props} asChild>
      <RouterLink to={props.href ?? '#'}>{props.children}</RouterLink>
    </NavigationMenu.Link>
  )
}
```

### Viewport size

The following CSS variables are exposed on `NavigationMenu.Root` and `NavigationMenu.Viewport`:

```css
/* size and position of the active trigger */
--trigger-width: <pixel-value>;
--trigger-height: <pixel-value>;
--trigger-x: <pixel-value>;
--trigger-y: <pixel-value>;

/* size and position of the active content */
--viewport-width: <pixel-value>;
--viewport-height: <pixel-value>;
--viewport-x: <pixel-value>;
--viewport-y: <pixel-value>;
```

Use `--viewport-width` and `--viewport-height` to animate the shared panel as the active item changes:

```css
[data-scope='navigation-menu'][data-part='viewport'] {
  width: var(--viewport-width);
  height: var(--viewport-height);
  transition:
    width 250ms ease,
    height 250ms ease;
}
```

### Large menus

When menu content is taller than the viewport, constrain the panel and scroll the content:

```css
[data-scope='navigation-menu'][data-part='viewport'] {
  max-height: min(var(--viewport-height), 70vh);
}

[data-scope='navigation-menu'][data-part='content'] {
  max-height: 70vh;
  overflow-y: auto;
}
```

## API Reference

### Props

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`closeDelay`**
Type: `number`
Required: false
Default Value: `300`
Description: The delay before the menu closes

**`defaultValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The default value of the navigation menu.
Use when you don't want to control the value of the menu.

**`disableClickTrigger`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disable the click trigger

**`disableHoverTrigger`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disable the hover trigger

**`disablePointerLeaveClose`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to disable the pointer leave close

**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  root: string
  list: string
  item: string
  trigger: (value: string) => string
  content: (value: string) => string
  viewport: string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the machine.

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the value of the menu changes

**`openDelay`**
Type: `number`
Required: false
Default Value: `200`
Description: The delay before the menu opens

**`orientation`**
Type: `'horizontal' | 'vertical'`
Required: false
Default Value: `"horizontal"`
Description: The orientation of the element.

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: Specifies the localized strings that identifies the accessibility elements and their states

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled value of the navigation menu

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: root
**`data-orientation`**: The orientation of the navigation-menu

### Arrow

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: arrow
**`data-orientation`**: The orientation of the arrow

### Content

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value of the item this content belongs to

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the content
**`data-value`**: The value of the item

### Indicator

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: indicator
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the indicator

### ItemIndicator

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: item-indicator
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the item
**`data-value`**: The value of the item

### Item

#### Props

**`value`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The value of the item

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the item is disabled

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: item
**`data-value`**: The value of the item
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the item
**`data-disabled`**: Present when disabled

### Link

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`closeOnClick`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to close the navigation menu when the link is clicked.

**`current`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the link is the current link

**`onSelect`**
Type: `(event: CustomEvent<any>) => void`
Required: false
Default Value: `undefined`
Description: Function called when the link is selected

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The value of the item this link belongs to

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: link
**`data-value`**: The value of the item
**`data-current`**: Present when current

### List

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: list
**`data-orientation`**: The orientation of the list

### RootProvider

#### Props

**`value`**
Type: `UseNavigationMenuReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+.

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### Trigger

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the item is disabled

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: trigger
**`data-trigger-proxy-id`**: 
**`data-value`**: The value of the item
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled

### ViewportPositioner

#### Props

**`align`**
Type: `'center' | 'start' | 'end'`
Required: false
Default Value: `undefined`
Description: Placement of the viewport for css variables `(--viewport-x, --viewport-y)`.

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: viewport-positioner
**`data-orientation`**: The orientation of the viewportpositioner
**`data-align`**: 

### Viewport

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: navigation-menu
**`data-part`**: viewport
**`data-state`**: "open" | "closed"
**`data-orientation`**: The orientation of the viewport
**`data-align`**: 

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `string | null` | The current value of the menu |
| `setValue` | `(value: string) => void` | Sets the value of the menu |
| `open` | `boolean` | Whether the menu is open |
| `isViewportRendered` | `boolean` | Whether the viewport is rendered |
| `getViewportNode` | `() => HTMLElement | null` | Gets the viewport node element |
| `orientation` | `Orientation` | The orientation of the menu |
| `reposition` | `VoidFunction` | Function to reposition the viewport |


## Accessibility

Complies with the [Navigation Menubar WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).

### Keyboard Support

**`ArrowDown`**
Description: When focus is on trigger (vertical orientation), moves focus to the next trigger.

**`ArrowUp`**
Description: When focus is on trigger (vertical orientation), moves focus to the previous trigger.

**`ArrowRight`**
Description: <span>When focus is on trigger (horizontal orientation), moves focus to the next trigger.<br />When focus is on content, moves focus to the next link.</span>

**`ArrowLeft`**
Description: <span>When focus is on trigger (horizontal orientation), moves focus to the previous trigger.<br />When focus is on content, moves focus to the previous link.</span>

**`Home`**
Description: <span>When focus is on trigger, moves focus to the first trigger.<br />When focus is on content, moves focus to the first link.</span>

**`End`**
Description: <span>When focus is on trigger, moves focus to the last trigger.<br />When focus is on content, moves focus to the last link.</span>