GitHub

Navigation Menu

Complex navigation menu with dropdowns and mega-menu support

Basic Usage

Loading...

Installation

pnpm add @corew500/ui

Usage

import { NavigationMenu } from "@corew500/ui/navigation-menu"

<NavigationMenu>Content</NavigationMenu>

CMS Integration

CMSPayload CMS Integration
This component supports CMS-driven content via @corew500/cms-payload.
Loading...

API Reference

Props

PropTypeDefaultDescription
actionsRefRefObject<NavigationMenuRootActions>A ref to imperative actions.
onOpenChangeComplete(open: boolean) => voidEvent handler called after any animations complete when the navigation menu is closed.
valueanynullThe controlled value of the navigation menu item that should be currently open. When non-nullish, the menu will be open. When nullish, the menu will be closed. To render an uncontrolled navigation menu, use the `defaultValue` prop instead.
defaultValueanynullThe uncontrolled value of the item that should be initially selected. To render a controlled navigation menu, use the `value` prop instead.
onValueChange(value: any, eventDetails: NavigationMenuRootChangeEventDetails) => voidCallback fired when the value changes.
delaynumber50How long to wait before opening the navigation menu. Specified in milliseconds.
closeDelaynumber50How long to wait before closing the navigation menu. Specified in milliseconds.
orientationenum'horizontal'The orientation of the navigation menu.
styleenumStyle applied to the element, or a function that returns a style object based on the component’s state.
classNameenumCSS class applied to the element, or a function that returns a class based on the component’s state.
renderenumAllows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Accessibility

Keyboard Navigation

  • Full keyboard navigation: Arrow keys to navigate items, Enter/Space to activate triggers
  • Escape key closes open dropdowns and returns focus to trigger

Focus Management

  • Focus is trapped within open dropdown content

Screen Readers

  • - Implements WAI-ARIA Navigation Menu pattern with proper roles and states
  • `aria-expanded` state on triggers indicates dropdown visibility
  • Dropdown indicators use `aria-hidden="true"` for decorative chevron icons

Localization

Translatable Content

  • - Pass pre-translated strings to NavigationMenuTrigger children
  • Link text in NavigationMenuLink should be localized at the application layer

Additional

  • No internal i18n dependencies