Navigation Menu

A collection of links and menus for website navigation.

Anatomy

<NavigationMenu.Root>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger />
      <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

Viewport

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

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.

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.

Controlled

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

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.

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:

Guides

Custom links

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

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:

/* 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:

[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:

[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

Renders a <> element.

Arrow

Renders a <div> element.

Content

Renders a <div> element.

Indicator

Renders a <div> element.

ItemIndicator

Renders a <div> element.

Item

Renders a <div> element.

Link

Renders a <a> element.

List

Renders a <div> element.

RootProvider

Renders a <> element.

Trigger

Renders a <button> element.

ViewportPositioner

Renders a <div> element.

Viewport

Renders a <div> element.

Context

API

Accessibility

Complies with the Navigation Menubar WAI-ARIA design pattern.

Keyboard Support