mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
69 lines
1.9 KiB
Markdown
69 lines
1.9 KiB
Markdown
---
|
|
title: Breadcrumb
|
|
description: A list of links that indicate the current page's location within a navigational hierarchy.
|
|
---
|
|
|
|
## Usage
|
|
|
|
Pass an array to the `links` prop of the Breadcrumb component. Each link can have the following properties:
|
|
|
|
- `label` - The label of the link.
|
|
- `labelClass` - The class of the link label.
|
|
- `icon` - The icon of the link.
|
|
- `iconClass` - The class of the link icon.
|
|
|
|
You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
|
|
|
|
:component-example{component="breadcrumb-example-basic"}
|
|
|
|
::callout{icon="i-heroicons-light-bulb"}
|
|
A `span` will be rendered instead of a link when the `to` property is not defined.
|
|
::
|
|
|
|
## Divider
|
|
|
|
Use the `divider` prop to customize the divider between each link, it can be **an icon or a string**. You can change it globally in `ui.breadcrumb.default.divider`. Defaults to `i-heroicons-chevron-right-20-solid`.
|
|
|
|
You can set the prop to `null` to hide the divider. Additionally, you can customize it using the [`divider`](#divider-1) slot.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
links:
|
|
- label: Home
|
|
to: /
|
|
- label: Navigation
|
|
- label: Breadcrumb
|
|
props:
|
|
divider: '/'
|
|
---
|
|
::
|
|
|
|
## Slots
|
|
|
|
### `default`
|
|
|
|
Use the `#default` slot to customize the link label. You will have access to the `link`, `index` and `isActive` properties in the slot scope.
|
|
|
|
:component-example{component="breadcrumb-example-default-slot"}
|
|
|
|
### `icon`
|
|
|
|
Use the `#icon` slot to customize the link icon. You will have access to the `link`, `index` and `isActive` properties in the slot scope.
|
|
|
|
:component-example{component="breadcrumb-example-icon-slot"}
|
|
|
|
### `divider`
|
|
|
|
Use the `divider` slot to customize the divider of the Breadcrumb.
|
|
|
|
:component-example{component="breadcrumb-example-divider-slot"}
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Config
|
|
|
|
:component-preset
|