//
A collection of links for navigating websites.
bun add xiod-ui1import {2 NavigationMenu,3 NavigationMenuContent,4 NavigationMenuIcon,5 NavigationMenuIndicator,6 NavigationMenuItem,7 NavigationMenuLink,8 NavigationMenuList,9 NavigationMenuPopup,10 NavigationMenuPortal,11 NavigationMenuTrigger,12 NavigationMenuViewport13} from "xiod-ui/navigation-menu";1<NavigationMenu>2 <NavigationMenuTrigger />3 <NavigationMenuContent>4 <NavigationMenuList>5 <NavigationMenuIndicator />6 <NavigationMenuItem />7 </NavigationMenuList>8 <NavigationMenuIcon />9 <NavigationMenuLink />10 <NavigationMenuPopup />11 <NavigationMenuPortal />12 <NavigationMenuViewport />13 </NavigationMenuContent>14</NavigationMenu>| Prop | Type | Default | Description |
|---|---|---|---|
actionsRef | RefObject<NavigationMenuRootActions| null>| undefined | - | A ref to imperative actions. |
onOpenChangeComplete | ((open: boolean) => void)| undefined | - | 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)| undefined | - | Callback fired when the value changes. |
delay | number| undefined | 50 | How long to wait before opening the navigation popup. Specified in milliseconds. |
closeDelay | number| undefined | 50 | How long to wait before closing the navigation popup. Specified in milliseconds. |
orientation | "horizontal"| "vertical"| undefined | 'horizontal' | The orientation of the navigation menu. |
className | string| ((state: NavigationMenuRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuRootState>| undefined | - | 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. |
style | CSSProperties| ((state: NavigationMenuRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
keepMounted | boolean| undefined | false | Whether to keep the content mounted in the DOM while the popup is closed. Ensures the content is present during server-side rendering for web crawlers. |
className | string| ((state: NavigationMenuContentState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuContentState>| undefined | - | 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. |
style | CSSProperties| ((state: NavigationMenuContentState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: NavigationMenuIconState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuIconState>| undefined | - | 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. |
style | CSSProperties| ((state: NavigationMenuIconState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
value | any | - | A unique value that identifies this navigation menu item. If no value is provided, a unique ID will be generated automatically. Use when controlling the navigation menu programmatically. |
className | string| ((state: NavigationMenuItemState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuItemState>| undefined | - | 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. |
style | CSSProperties| ((state: NavigationMenuItemState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | 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. |
active | boolean| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: NavigationMenuListState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuListState>| undefined | - | 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. |
style | CSSProperties| ((state: NavigationMenuListState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: NavigationMenuPopupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuPopupState>| undefined | - | 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. |
style | CSSProperties| ((state: NavigationMenuPopupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
align | Align| undefined | center | |
sideOffset | number| OffsetFunction| undefined | 10 | |
alignOffset | number| OffsetFunction| undefined | - | |
side | Side| undefined | bottom | |
anchor | Element| VirtualElement| RefObject<Element| null>| (() => Element| VirtualElement| null)| null| undefined | - | |
hideArrow | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: NavigationMenuPortalState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: NavigationMenuPortalState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuPortalState>| undefined | - | 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. |
keepMounted | boolean| undefined | false | Whether to keep the portal mounted in the DOM while the popup is hidden. |
container | HTMLElement| ShadowRoot| RefObject<HTMLElement| ShadowRoot| null>| null| undefined | - | A parent element to render the portal element into. |
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: NavigationMenuTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuTriggerState>| undefined | - | 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. |
style | CSSProperties| ((state: NavigationMenuTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: NavigationMenuViewportState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, NavigationMenuViewportState>| undefined | - | 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. |
style | CSSProperties| ((state: NavigationMenuViewportState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |