Breadcrumb

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.

<x-breadcrumb>
  <x-breadcrumb.item to="/docs" label="Home"/>
  <x-breadcrumb.item to="/docs/components/introduction" label="Components"/>
  <x-breadcrumb.item to="/docs/components/breadcrumb" label="Breadrumb"/>
</x-breadcrumb>

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="https://docs.laraloop.com/docs"
        class="">Home</a>
  </li>

  <li class="breadcrumb-item">
    <a href="https://docs.laraloop.com/docs/components/introduction"
        class="">Components</a>
  </li>

  <li class="breadcrumb-item">
    <a href="https://docs.laraloop.com/docs/components/breadcrumb"
        aria-current="page"
        class="active">Breadrumb</a>
  </li>
</ol>

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.

<x-breadcrumb>
          <x-breadcrumb.item href="/docs" label="Home"/>
          <x-breadcrumb.item href="/docs/components/introduction" label="Components"/>
          <x-breadcrumb.item href="/docs/components/breadcrumb" label="Breadrumb" active/>
        </x-breadcrumb>

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="/docs"
        class="">Home</a>
  </li>

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

  <li class="breadcrumb-item">
    <a href="/docs/components/breadcrumb"
        class="active">Breadrumb</a>
  </li>
</ol>

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.

<x-breadcrumb>
  <x-breadcrumb.item href="/docs" label="Home"/>
  <x-breadcrumb.item href="/docs/components/introduction" label="Components"/>
  <x-breadcrumb.item label="Breadrumb" active/>
</x-breadcrumb>

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="/docs"
        class="">Home</a>
  </li>

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

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

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... -->
</x-breadcrumb>

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="/docs"
        class="">Home</a>
  </li>

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

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

Important notes regarding active status

Bootstrap set the active link to .breadcrumb-item and not the link. So the x-link component that add active class to itself would not be styled. I have made a PR which style also the link with active class, and is now part of Bootstrap core. In case your Bootstrap version doesn't include this addition, you can either set active prop yourself to the link or add below SCSS code:

.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.