Breadcrumb

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

Table of Content

Examples

Separators are automatically added in CSS through ::before and content.

								<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item active" aria-current="page">Home</li>
	</ol>
</nav>

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

<nav 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>
								
							
								
									<ul class="breadcrumbs">
										<li class="nav-home">
											<a href="#">
												<i class="flaticon-home"></i>
											</a>
										</li>
										<li class="separator">
											<i class="flaticon-right-arrow"></i>
										</li>
										<li class="nav-item">
											<a href="#">Base</a>
										</li>
										<li class="separator">
											<i class="flaticon-right-arrow"></i>
										</li>
										<li class="nav-item">
											<a href="#">Buttons</a>
										</li>
									</ul>