Docs
Purchase now

Breadcrumb

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

Example

<div>
   <breadcrumb>
      <breadcrumb-item active>Home</breadcrumb-item>
   </breadcrumb>
   <breadcrumb>
     <breadcrumb-item><a href="#!">Home</a></breadcrumb-item>
     <breadcrumb-item active>Library</breadcrumb-item>
   </breadcrumb>
   <breadcrumb>
    <breadcrumb-item><a href="#!">Home</a></breadcrumb-item>
    <breadcrumb-item><a href="#!">Library</a></breadcrumb-item>
    <breadcrumb-item active>Data</breadcrumb-item>
   </breadcrumb>
</div>
Show Code

Dark

<div>
   <breadcrumb list-classes="breadcrumb-dark bg-default">
      <breadcrumb-item active>Home</breadcrumb-item>
   </breadcrumb>
   <breadcrumb list-classes="breadcrumb-dark bg-primary">
     <breadcrumb-item><a href="#!">Home</a></breadcrumb-item>
     <breadcrumb-item active>Library</breadcrumb-item>
   </breadcrumb>
   <breadcrumb list-classes="breadcrumb-dark bg-danger">
    <breadcrumb-item><a href="#!">Home</a></breadcrumb-item>
    <breadcrumb-item><a href="#!">Library</a></breadcrumb-item>
    <breadcrumb-item active>Data</breadcrumb-item>
   </breadcrumb>
</div>
Show Code

Using the contextual badge component together with the tag prop in order to switch to your desired html element. Providing tag="a" will transform the badge into an anchor with hover and focus states.

<breadcrumb list-classes="breadcrumb-links">
  <breadcrumb-item><a href="#!">Home</a></breadcrumb-item>
  <breadcrumb-item><a href="#!">Library</a></breadcrumb-item>
  <breadcrumb-item active>Data</breadcrumb-item>
</breadcrumb>
Show Code
Slot Description
default Default content for the badge
Slot Description
default Default content for the badge

← Buttons →