Navigation Menu
A collection of links for navigating websites.
Installation
npm i @huin-core/react-navigation-menuAPI Reference
NavigationMenu
| Prop | Type | Description |
|---|---|---|
| defaultValue | — | Specifies the initial value of the component when it is first rendered, before any user interaction or dynamic updates. |
| value | string | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| onValueChange | function | Event handler called when the value changes. |
| delayDuration | number | Specifies the amount of time to wait before an action or effect is triggered, often used to control the timing of interactions or animations. |
| skipDelayDuration | number | How much time a user has to enter another trigger without incurring a delay again. |
| dir | "ltr" | "rtl" | The reading direction. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode. |
| orientation | "vertical" | "horizontal" | Specifies the direction or layout of the component, determining whether it is displayed vertically or horizontally. |
NavigationMenuSub
| Prop | Type | Description |
|---|---|---|
| defaultValue | — | Specifies the initial value of the component when it is first rendered, before any user interaction or dynamic updates. |
| value | string | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| onValueChange | function | Event handler called when the value changes. |
| orientation | "vertical" | "horizontal" | Specifies the direction or layout of the component, determining whether it is displayed vertically or horizontally. |
NavigationMenuList
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
NavigationMenuItem
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| value | string | Represents the current value or state of the component, which can be used to bind or track its data over time. |
NavigationMenuTrigger
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
NavigationMenuContent
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| onEscapeKeyDown | function | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. |
| onPointerDownOutside | function | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault |
| onFocusOutside | function | Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. |
| onInteractOutside | function | Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
NavigationMenuLink
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| active | boolean | Used to identify the link as the currently active page. |
| onSelect | function | Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the menubar from closing when selecting that item. |
NavigationMenuIndicator
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
NavigationMenuViewport
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
Keyboard Interactions
| Key | Description |
|---|---|
Space Enter | Opens the focused item's content. |
ArrowDown | Moves focus into the open content. |
Esc | Closes the open content. |