2.3 KiB
description, links
| description | links | |||||||
|---|---|---|---|---|---|---|---|---|
| A hierarchy of links to navigate through a website. |
|
Usage
Items
Use the items prop as an array of objects with the following properties:
label?: string{lang="ts-type"}icon?: string{lang="ts-type"}avatar?: AvatarProps{lang="ts-type"}class?: any{lang="ts-type"}slot?: string{lang="ts-type"}
You can also pass any property from the Link component such as to, target, etc.
::component-code
ignore:
- items external:
- items
props:
items:
- label: 'Home' icon: 'i-lucide-house'
- label: 'Components' icon: 'i-lucide-box' to: '/components'
- label: 'Breadcrumb' icon: 'i-lucide-link' to: '/components/breadcrumb'
::
::note
A span is rendered instead of a link when the to property is not defined.
::
Separator Icon
Use the separator-icon prop to customize the Icon between each item. Defaults to i-lucide-chevron-right.
::component-code
ignore:
- items external:
- items
props:
separatorIcon: 'i-lucide-arrow-right'
items:
- label: 'Home' icon: 'i-lucide-house'
- label: 'Components' icon: 'i-lucide-box' to: '/components'
- label: 'Breadcrumb' icon: 'i-lucide-link' to: '/components/breadcrumb'
::
::tip{to="/getting-started/icons#theme"}
You can customize this icon globally in your app.config.ts under ui.icons.chevronRight key.
::
Examples
With separator slot
Use the #separator slot to customize the separator between each item.
:component-example{name="breadcrumb-separator-slot-example"}
With custom slot
Use the slot property to customize a specific item.
You will have access to the following slots:
#{{ item.slot }}{lang="ts-type"}#{{ item.slot }}-leading{lang="ts-type"}#{{ item.slot }}-label{lang="ts-type"}#{{ item.slot }}-trailing{lang="ts-type"}
:component-example{name="breadcrumb-custom-slot-example"}
::tip{to="#slots"}
You can also use the #item, #item-leading, #item-label and #item-trailing slots to customize all items.
::
API
Props
:component-props
Slots
:component-slots
Theme
:component-theme