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 |