mirror of https://github.com/ElemeFE/element
1.8 KiB
1.8 KiB
Breadcrumb
Displays the location of the current page, making it easier to browser back.
Basic usage
:::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 '/'.
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
:::
Icon separator
:::demo Set separator-class to use iconfont as the separator，it will cover separator
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
:::
Breadcrumb Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| separator | separator character | string | — | / |
| separator-class | class name of icon separator | string | — | - |
Breadcrumb Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| to | target route of the link, same as to of vue-router |
string/object | — | — |
| replace | if true, the navigation will not leave a history record |
boolean | — | false |