DOCUMENTATION

Breadcrumb


<nav>
<ol class="flex mb-4 text-sm text-gray-600 lg:">
    <li>Home</li>
</ol>
</nav>
<nav>
<ol class="flex mb-4 text-sm text-gray-600 lg:">
    <li class="pr-2 text-blue-500"><a href="#">Home</a></li>
    <span>/</span>
    <li class="pl-2">Library</li>
</ol>
</nav>
<nav>
<ol class="flex mb-4 text-sm text-gray-600 lg:">
    <li class="pr-2 text-blue-500"><a href="#">Home</a></li><span>/</span>
    <li class="px-2 text-blue-500"><a href="#">Library</a></li><span>/</span>
    <li class="pl-2">Data</li>
</ol>
</nav>
<nav>
<ol class="flex mb-4 text-sm text-gray-600 lg:">
    <li class="pr-2 text-blue-500"><a href="#">Home</a></li><span>></span>
    <li class="pl-2">Library</li>
</ol>
</nav>
<nav>
<ol class="flex mb-4 text-sm text-gray-600 lg:">
    <li class="text-blue-500 inline-flex items-center"><a href="#">Home</a></li>
    <li class="pl-2 inline-flex items-center">
    <svg class="w-auto h-5 pr-2 text-black" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
    </svg>Library
    </li>
</ol>
</nav>   
        

Dividers

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

<nav style="--bs-breadcrumb-divider" aria-label="breadcrumb">
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home </a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>

It’s also possible to use an embedded SVG icon. Apply it via our CSS custom property, or use the Sass variable.

<nav style="--bs-breadcrumb-divider" aria-label="breadcrumb">
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home </a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>

You can also remove the divider setting --bs-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider: none;.

<nav style="--bs-breadcrumb-divider" aria-label="breadcrumb">
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home </a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>

Updated on February 28, 2022
Was this page helpful?