## 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 '/'. ```html <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> <el-breadcrumb-item><a href="/">promotion management</a></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` ```html <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 |