Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
https://getbootstrap.com/docs/5.1/components/breadcrumb/Examples
<!--
To center on mobile, add to .breadcrumb:
justify-content-md-start justify-content-center
Change the divider: add to nav
style="--bs-breadcrumb-divider: '>';"
-->
<!-- breadcrumb : clean (default) -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<!-- breadcrumb : bg-light -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light p-3">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<!-- breadcrumb : bordered -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb border p-3">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<!-- breadcrumb : border-bottom -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb border-bottom p-3">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<!-- breadcrumb : sublime -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-sublime p-3">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>