NavigationMenu
A list of links that can be displayed horizontally or vertically.
Based on Reka UI NavigationMenu
Key Props
items: as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}avatar?: AvatarProps{lang="ts-type"}badge?: string | number | BadgeProps{lang="ts-type"}tooltip?: TooltipProps{lang="ts-type"}trailingIcon?: string{lang="ts-type"}type?: 'label' | 'trigger' | 'link'{lang="ts-type"}defaultOpen?: boolean{lang="ts-type"}open?: boolean{lang="ts-type"}value?: string{lang="ts-type"}disabled?: boolean{lang="ts-type"}slot?: string{lang="ts-type"}onSelect?: (e: Event) => void{lang="ts-type"}children?: NavigationMenuChildItem[]{lang="ts-type"}class?: any{lang="ts-type"}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"}
You can pass any property from the Link component such as to, target, etc.
orientation: to change the orientation of the NavigationMenu.highlight: to display a highlighted border for the active item.color: to change the color of the NavigationMenu.variant: to change the variant of the NavigationMenu.arrow: to display an arrow on the NavigationMenu content when items have children.slot:
Usage
<UNavigationMenu
<!-- props here -->
/>Slots
#content#item