BootstrapVue Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS with BootstrapVue breadcrumb.

Example

Copy

<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

Copy

<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

Copy

<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