Breadcrumb

Create breadcrumbs to show users their location within a website.

Usage

The Breadcrumb component consists of links, which are aligned side by side and separated by a divider. Add the .breadcrumb class to a <ul> or <ol> element to define the component. Use <a> elements as breadcrumb items within the list. An active state is automatically applied to the last <li> element.

To add list items without a link, simply use <li> element instead of an <a>. Alternatively, disable an <a> element by adding the .disabled attribute to the <li> element and remove the href attribute from the anchor to make it inaccessible through keyboard navigation.


        <ul class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Pictures</a></li>
          <li><a href="#">Summer 15</a></li>
          <li>Italy</li>
        </ul>
        

Styles


        <ul class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        <ul class="breadcrumb primary">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        <ul class="breadcrumb secondary">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        <ul class="breadcrumb dark">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        <ul class="breadcrumb gray">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        <ul class="breadcrumb success">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        <ul class="breadcrumb info">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        <ul class="breadcrumb warning">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        <ul class="breadcrumb danger">
          <li><a href="#">Home</a></li>
          <li>Butter Cake</li>
        </ul>

        

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon