1# NavigationMenu
2 
3A list of links that can be displayed horizontally or vertically.
4 
5> Based on [Reka UI NavigationMenu](https://reka-ui.com/docs/components/navigation-menu)
6 
7## Key Props
8 
9- `items`: as an array of objects with the following properties:
10 
11- `label?: string`{lang="ts-type"}
12- `icon?: string`{lang="ts-type"}
13- `avatar?: AvatarProps`{lang="ts-type"}
14- `badge?: string | number | BadgeProps`{lang="ts-type"}
15- `tooltip?: TooltipProps`{lang="ts-type"}
16- `trailingIcon?: string`{lang="ts-type"}
17- `type?: 'label' | 'trigger' | 'link'`{lang="ts-type"}
18- `defaultOpen?: boolean`{lang="ts-type"}
19- `open?: boolean`{lang="ts-type"}
20- `value?: string`{lang="ts-type"}
21- `disabled?: boolean`{lang="ts-type"}
22- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
23- `onSelect?: (e: Event) => void`{lang="ts-type"}
24- `children?: NavigationMenuChildItem[]`{lang="ts-type"}
25- `class?: any`{lang="ts-type"}
26- `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`{lang="ts-type"}
27 
28You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
29 
30- `orientation`: to change the orientation of the NavigationMenu.
31- `highlight`: to display a highlighted border for the active item.
32- `color`: to change the color of the NavigationMenu.
33- `variant`: to change the variant of the NavigationMenu.
34- `arrow`: to display an arrow on the NavigationMenu content when items have children.
35- `slot`:
36 
37## Usage
38 
39```vue
40<UNavigationMenu
41  <!-- props here -->
42/>
43```
44 
45## Slots
46 
47- `#content`
48- `#item`
49