HaimKortovich
a2eb1f3789
- Add nuxt-skills (vue, nuxt, nuxt-ui) to .claude/skills/ - Create useCustomerSelection() composable for managing insured/buyer selection - Create usePolicyApi() composable for policy API operations - Update auto quote components to use insured/buyer instead of client - Update vehicle fields: remove valorVehiculo, add market_value, requested_value, rc_limits - Make chassis_number and engine_number optional - Update auto quote types and composables to match new API structure - Update auto quote page to submit to policy API with new structure
2.1 KiB
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"} -
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