NavigationMenu Component

The NavigationMenu component provides a horizontal navigation bar with dropdown panels, featuring a signature "woosh" animation when moving between items. It supports both controlled and uncontrolled modes, full keyboard navigation, and hover interactions.

Usage

Basic Navigation Menu

<NavigationMenu>
  <NavigationMenu.Item title="Products">
    {/* Any content */}
  </NavigationMenu.Item>
  <NavigationMenu.Item title="Solutions">
    {/* Any content */}
  </NavigationMenu.Item>
  <NavigationMenu.Item title="Resources">
    {/* Any content */}
  </NavigationMenu.Item>
</NavigationMenu>

Controlled Mode

Use the openItem and onOpenChange props to control which item is open from your component state.

Currently open: null

const [openItem, setOpenItem] = createSignal<string | null>(null);

<NavigationMenu openItem={openItem()} onOpenChange={setOpenItem}>
  <NavigationMenu.Item title="First">
    <Text.body>First panel content</Text.body>
  </NavigationMenu.Item>
  <NavigationMenu.Item title="Second">
    <Text.body>Second panel content</Text.body>
  </NavigationMenu.Item>
</NavigationMenu>

NavigationMenu Props

Name	Type	Default	Description
`children`	`JSXElement`	-	NavigationMenu.Item components to render as menu triggers and content
`openItem`	`string \| null`	undefined	Controlled mode: the ID of the currently open item (or null if none)
`onOpenChange`	`(id: string \| null) => void`	undefined	Callback fired when the open item changes
`styles`	`StyleXStyles`	undefined	Additional StyleX styles to apply to the root nav element

NavigationMenu.Item Props

Name	Type	Default	Description
`title`	`string`	-	Text displayed on the trigger button
`children`	`JSXElement`	-	Content displayed in the dropdown panel when open
`id`	`string`	title	Unique identifier for the item (defaults to title if not provided)

Keyboard Navigation

The NavigationMenu provides full keyboard support for accessibility:

Arrow Left / Right - Move focus between menu items

Enter / Space - Open or close the dropdown for the focused item

Escape - Close the currently open dropdown

Arrow Down - When dropdown is open, moves focus to first focusable element inside

Tab - Navigate through focusable elements inside the dropdown content

Animation

The NavigationMenu features a signature "woosh" animation when moving between items:

Sliding popover - The dropdown panel slides horizontally to center under the active trigger

Resizing container - The container smoothly animates its width and height to fit each panel's content

Content slide - Old content slides completely out while new content slides completely in

Reduced motion - Slide animations are disabled when the user prefers reduced motion

Behavior

Hover intent - Dropdown opens after 100ms hover delay to prevent accidental triggers

Close delay - 150ms delay before closing when mouse leaves, allowing smooth transitions

Click to toggle - Clicking a trigger toggles the dropdown open/closed

Click outside - Clicking outside the navigation area closes any open dropdown

Accessibility

The NavigationMenu includes several accessibility features:

Trigger buttons have aria-expanded and aria-haspopup attributes

Full keyboard navigation support

Focus-visible outline for keyboard users

Respects prefers-reduced-motion media query