# NavigationMenu

Main navigation with expandable content.

## How to use it

Use NavigationMenuLink for destinations and Trigger with Content for groups. Keep clear names and keyboard navigation.



## Import


```tsx
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuViewport } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuLink href="/docs">Documentation</NavigationMenuLink></NavigationMenuItem><NavigationMenuItem><NavigationMenuTrigger>Explore</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/docs/componentes/button" style={{display:"block",padding:24}}>Button →</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>
```


## API: NavigationMenu


```typescript
NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string | No | Initial value when the component manages its own state. |
| delayDuration | number | No | The duration from when the pointer enters the trigger until the tooltip gets opened. |
| dir | "ltr" \| "rtl" | No | Interface reading direction. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLElement> | No | Form submission event. |
| onValueChange | ((value: string) => void) | No | Receives the value after an interaction. |
| orientation | "horizontal" \| "vertical" | No | Horizontal or vertical axis. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| skipDelayDuration | number | No | How much time a user has to enter another trigger without incurring a delay again. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| value | string | No | Controlled value. Update it from the change callback. |

## API: NavigationMenuList


```typescript
NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLUListElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLUListElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLUListElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: NavigationMenuItem


```typescript
NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLLIElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLLIElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLLIElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| value | string | No | Controlled value. Update it from the change callback. |

## API: NavigationMenuLink


```typescript
NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| active | boolean | No | See the published type. |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLAnchorElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLAnchorElement> | No | Action performed when the element is activated. |
| onSelect | ((event: Event) => void) | No | Action or selection made by the user. |
| onSubmit | SubmitEventHandler<HTMLAnchorElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | string | No | Operation type or mode; values depend on the component. |

## API: NavigationMenuTrigger


```typescript
NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLButtonElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLButtonElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLButtonElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "button" \| "submit" \| "reset" | No | Operation type or mode; values depend on the component. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |

## API: NavigationMenuContent


```typescript
NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| deferPointerDownOutside | boolean | No | When `true`, a `'pointerdown'` event outside of the layered element will wait for the interaction's click event before dispatching, allowing third-party code to stop propagation of later events and cancel dismissal. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onEscapeKeyDown | ((event: KeyboardEvent) => void) | No | Event handler called when the escape key is down. Can be prevented. |
| onFocusOutside | ((event: FocusOutsideEvent) => void) | No | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. |
| onInteractOutside | ((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void) | No | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |
| onPointerDownOutside | ((event: PointerDownOutsideEvent) => void) | No | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: NavigationMenuIndicator


```typescript
NavigationMenuIndicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: NavigationMenuViewport


```typescript
NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

Source: https://kivora.pro/docs/componentes/navigation-menu