Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS with BootstrapVue breadcrumb.
Example
<b-breadcrumb>
<b-breadcrumb-item href="#home" active>Home</b-breadcrumb-item>
</b-breadcrumb>
<b-breadcrumb>
<b-breadcrumb-item href="#home">Home</b-breadcrumb-item>
<b-breadcrumb-item href="#library" active>Library</b-breadcrumb-item>
</b-breadcrumb>
<b-breadcrumb>
<b-breadcrumb-item href="#home">Home</b-breadcrumb-item>
<b-breadcrumb-item href="#library">Library</b-breadcrumb-item>
<b-breadcrumb-item href="#data" active>Data</b-breadcrumb-item>
</b-breadcrumb>
Dark
<b-breadcrumb class="breadcrumb-dark bg-default">
<b-breadcrumb-item href="#home">Home</b-breadcrumb-item>
</b-breadcrumb>
<b-breadcrumb class="breadcrumb-dark bg-primary">
<b-breadcrumb-item href="#home">Home</b-breadcrumb-item>
<b-breadcrumb-item href="#library">Library</b-breadcrumb-item>
</b-breadcrumb>
<b-breadcrumb class="breadcrumb-dark bg-danger">
<b-breadcrumb-item href="#home">Home</b-breadcrumb-item>
<b-breadcrumb-item href="#library">Library</b-breadcrumb-item>
<b-breadcrumb-item href="#data">Data</b-breadcrumb-item>
</b-breadcrumb>
Links
<b-breadcrumb class="breadcrumb-links">
<b-breadcrumb-item href="#home">Home</b-breadcrumb-item>
<b-breadcrumb-item href="#library">Library</b-breadcrumb-item>
<b-breadcrumb-item href="#data" active>Data</b-breadcrumb-item>
</b-breadcrumb>
Breadcrumb Props
| PROP NAME |
TYPE |
DEFAULT |
DESCRIPTION |
| type |
String |
N/A |
Breadcrumb background type |
| listClasses |
String / Object |
N/A |
Breadcrumb list classes |
Breadcrumb Slots
| SLOT |
DESCRIPTION |
| default |
Default content for the badge |
BreadcrumbItem Props
| PROP NAME |
TYPE |
DEFAULT |
DESCRIPTION |
| active |
Boolean |
N/A |
Whether breadcrumb item is active |
BreadcrumbItem Slots
| SLOT |
DESCRIPTION |
| default |
Default content for the badge |