Breadcrumbs
Indicate the current page’s location within a navigational hierarchy.
Component Props
- crumbName: [string] - Text to display with crumb
crumbUrl: [string] - crumb URL
Base Example
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Crumb 1</a></li>
<li class="breadcrumb-item"><a href="#">Crumb 2</a></li>
<li class="breadcrumb-item"><a href="#">Crumb 3</a></li>
<li class="breadcrumb-item active" aria-current="page">Active Crumb</li>
</ol>
</nav>
Dark Background Example
When breadcrumb component placed in a container with a dark background.
<div class="text-bg-dark p-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Crumb 1</a></li>
<li class="breadcrumb-item"><a href="#">Crumb 2</a></li>
<li class="breadcrumb-item"><a href="#">Crumb 3</a></li>
<li class="breadcrumb-item active" aria-current="page">Active Crumb</li>
</ol>
</nav>
</div>