Navigation Menu
Site links on a pill whose panels open in one glass popup that resizes and slides between them.
01Preview
0102Installation
npx shadcn@latest add https://aiellie.app/r/navigation-menu.json03API reference
13From the Base UI documentation
Groups all parts of the navigation menu. Renders a <nav> element at the root, or <div> element when nested.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | Value | null | null | The uncontrolled value of the item that should be initially selected. To render a controlled navigation menu, use the value prop instead. |
| value | Value | null | 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. |
| onValueChange | ((value: Value | null, eventDetails: NavigationMenu.Root.ChangeEventDetails) => void) | - | Callback fired when the value changes. |
| actionsRef | React.RefObject<NavigationMenu.Root.Actions | null> | - | A ref to imperative actions. |
| onOpenChangeComplete | ((open: boolean) => void) | - | Event handler called after any animations complete when the navigation menu is closed. |
| delay | number | 50 | How long to wait before opening the navigation popup. Specified in milliseconds. |
| closeDelay | number | 50 | How long to wait before closing the navigation popup. Specified in milliseconds. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the navigation menu. |
| className | string | ((state: NavigationMenu.Root.State) => string | undefined) | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
| style | React.CSSProperties | ((state: NavigationMenu.Root.State) => React.CSSProperties | undefined) | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement | ((props: HTMLProps, state: NavigationMenu.Root.State) => ReactElement) | - | 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. |