brand v1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
Behavioral
Layout

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. See official bootstrap document

Basic example

Use classes with .breadcrumbfor creating simple breadcrumb.

														
<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">All images</a></li>
		<li class="breadcrumb-item"><a href="#">Jampack</a></li>
		<li class="breadcrumb-item active" aria-current="page">Gallery</li>
	</ol>
</nav>
Sizes

Use.breadcrumb-sm classes with .breadcrumbfor sizes.

														
<nav aria-label="breadcrumb">
	<ol class="breadcrumb breadcrumb-simple">
		<li class="breadcrumb-item"><a href="#">All images</a></li>
		<li class="breadcrumb-item"><a href="#">Jampack</a></li>
		<li class="breadcrumb-item active" aria-current="page">Gallery</li>
	</ol>
</nav>
<nav aria-label="breadcrumb">
	<ol class="breadcrumb breadcrumb-sm breadcrumb-simple">
		<li class="breadcrumb-item"><a href="#">All images</a></li>
		<li class="breadcrumb-item"><a href="#">Jampack</a></li>
		<li class="breadcrumb-item active" aria-current="page">Gallery</li>
	</ol>
</nav>
Jump to