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
49 lines
2.1 KiB
Markdown
49 lines
2.1 KiB
Markdown
# NavigationMenu
|
|
|
|
A list of links that can be displayed horizontally or vertically.
|
|
|
|
> Based on [Reka UI NavigationMenu](https://reka-ui.com/docs/components/navigation-menu)
|
|
|
|
## 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"}](#with-custom-slot)
|
|
- `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](/docs/components/link#props) 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
|
|
|
|
```vue
|
|
<UNavigationMenu
|
|
<!-- props here -->
|
|
/>
|
|
```
|
|
|
|
## Slots
|
|
|
|
- `#content`
|
|
- `#item`
|