Navigation Menu
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { NavigationMenu } from "@corew500/ui/navigation-menu"
<NavigationMenu>Content</NavigationMenu>CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| actionsRef | RefObject<NavigationMenuRootActions> | — | A ref to imperative actions. |
| onOpenChangeComplete | (open: boolean) => void | — | Event handler called after any animations complete when the navigation menu is closed. |
| value | any | null | The 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. |
| defaultValue | any | null | The 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) => void | — | Callback fired when the value changes. |
| delay | number | 50 | How long to wait before opening the navigation menu. Specified in milliseconds. |
| closeDelay | number | 50 | How long to wait before closing the navigation menu. Specified in milliseconds. |
| orientation | enum | 'horizontal' | The orientation of the navigation menu. |
| style | enum | — | Style applied to the element, or a function that returns a style object based on the component’s state. |
| className | enum | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
| render | enum | — | Allows 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