2021-10-22 19:32:39 +08:00
---
2021-10-25 15:21:08 +08:00
title: Breadcrumb
2021-10-22 19:32:39 +08:00
lang: en-US
---
2021-09-17 00:18:50 +08:00
# Breadcrumb
2020-08-13 15:18:26 +08:00
Displays the location of the current page, making it easier to browser back.
2021-09-17 00:18:50 +08:00
## Basic usage
2020-08-13 15:18:26 +08:00
:::demo In `el-breadcrumb` , each `el-breadcrumb-item` is a tag that stands for every level starting from homepage. This component has a `String` attribute `separator` , and it determines the separator. Its default value is '/'.
2021-09-17 00:18:50 +08:00
breadcrumb/basic
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Icon separator
2020-08-13 15:18:26 +08:00
2022-01-27 16:27:30 +08:00
:::demo Set `separator-icon` to use `svg icon` as the separator, it will cover `separator`
2020-08-13 15:18:26 +08:00
2021-09-17 00:18:50 +08:00
breadcrumb/icon
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-12-13 21:37:30 +08:00
## Breadcrumb API
2020-08-13 15:18:26 +08:00
2022-12-13 21:37:30 +08:00
### Breadcrumb Attributes
2020-08-13 15:18:26 +08:00
2022-12-13 21:37:30 +08:00
| Name | Description | Type | Default |
| -------------- | -------------------------------- | ------------------------ | ------- |
| separator | separator character | ^[string] | / |
| separator-icon | icon component of icon separator | ^[string] / ^[Component] | - |
2021-10-04 08:26:51 +08:00
2022-12-13 21:37:30 +08:00
### Breadcrumb Slots
2021-10-04 08:26:51 +08:00
2022-12-13 21:37:30 +08:00
| Name | Description | Subtags |
| ------- | ------------------------- | --------------- |
| default | customize default content | Breadcrumb Item |
2020-08-13 15:18:26 +08:00
2022-12-13 21:37:30 +08:00
## BreadcrumbItem API
2021-10-04 08:26:51 +08:00
2022-12-13 21:37:30 +08:00
### BreadcrumbItem Attributes
2021-10-04 08:26:51 +08:00
2022-12-13 21:37:30 +08:00
| Name | Description | Type | Default |
| ------- | --------------------------------------------------------- | --------------------------------------- | ------- |
| to | target route of the link, same as `to` of `vue-router` | ^[string] / ^[object]`RouteLocationRaw` | '' |
| replace | if `true` , the navigation will not leave a history record | ^[boolean] | false |
### BreadcrumbItem Slots
| Name | Description |
| ------- | ------------------------- |
| default | customize default content |