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