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

How it works

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use the utilities to add additional styles as desired.

Using link component

You can use prop to and the x-link will be used which detect the current link and set active status.

Using normal link

You can use prop href for create link without x-link component. In this case you have to pass the prop active for set active link.

Without any link

You can also pass without props to and href, in this case the x-breadcrumb.item will not use any link, or you can pass anything you want with main slot.

Set custom divider and aria-label

You can use prop divider to set a custom divider and label to set aria-label.

<x-breadcrumb label="My Breadcrumb" divider=">">
  <!-- Breadcrumb content go here... -->
<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="/docs"

  <li class="breadcrumb-item">
    <a href="/docs/components/introduction"

  <li aria-current="page"
      class="breadcrumb-item active">Breadrumb

Important notes regarding active status

.breadcrumb-item {
  > .active {
    color: $breadcrumb-active-color;

  > .active {
    text-decoration: none;
    cursor: default;
    pointer-events: none;

You should find also this code commented in file resources/scss/bootstrap/_breadcrumb.scss.