sleek-dashboard/src/breadcrumb.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

---
layout: default
title: "Breadcrumb - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "breadcrumb"
plugins: []
---
						<div class="breadcrumb-wrapper">
							<h1>Breadcrumb</h1>
							{%- include breadcrumb.htm -%}
						</div>
						<div class="row">
							<div class="col-12 col-xl-6">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Breadcrumbs</h2>
									</div>
									<div class="card-body">
										<p class="mb-5">Breadcrumb Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/breadcrumb/"
											 target="_blank">more details.</a></p>
										<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">Components</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="#">Components</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Bredcrumbs</li>
											</ol>
										</nav>

									</div>
								</div>
							</div>
							<div class="col-12 col-xl-6">

								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Inverse Breadcrumbs</h2>
									</div>
									<div class="card-body">
										<p class="mb-5"> For Breadcrumb inverse add class <code> .breadcrumb-inverse </code>  to <code> &lt;ol class="breadcrumb"&gt; </code>  </p>
										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-inverse">
												<li class="breadcrumb-item active" aria-current="page">Home</li>
											</ol>
										</nav>

										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-inverse">
												<li class="breadcrumb-item">
													<a href="#">Home</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Components</li>
											</ol>
										</nav>

										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-inverse">
												<li class="breadcrumb-item">
													<a href="#">Home</a>
												</li>
												<li class="breadcrumb-item">
													<a href="#">Components</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Bredcrumbs</li>
											</ol>
										</nav>

									</div>
								</div>
							</div>
							<div class="col-12 col-xl-6">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Color Breadcrumbs</h2>
									</div>
									<div class="card-body">
										<p class="mb-5"> Background color in breadcrumb for exaple add class <code> .breadcrumb-* </code> to <code> &lt;ol class="breadcrumb"&gt; </code>
										</p>
										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-primary">
												<li class="breadcrumb-item">
													<a href="#">Home</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Components Bredcrumbs Primary</li>
											</ol>
										</nav>

										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-pink">
												<li class="breadcrumb-item">
													<a href="#">Home</a>
												</li>
												<li class="breadcrumb-item">
													<a href="#">Components</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Pink</li>
											</ol>
										</nav>

										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-success">
												<li class="breadcrumb-item">
													<a href="#">Home</a>
												</li>
												<li class="breadcrumb-item">
													<a href="#">Components</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Success</li>
											</ol>
										</nav>

										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-danger">
												<li class="breadcrumb-item">
													<a href="#">Home</a>
												</li>
												<li class="breadcrumb-item">
													<a href="#">Components</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Danger</li>
											</ol>
										</nav>

										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-warning">
												<li class="breadcrumb-item">
													<a href="#">Home</a>
												</li>
												<li class="breadcrumb-item">
													<a href="#">Components</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Warning</li>
											</ol>
										</nav>

										<nav aria-label="breadcrumb">
											<ol class="breadcrumb breadcrumb-info">
												<li class="breadcrumb-item">
													<a href="#">Home</a>
												</li>
												<li class="breadcrumb-item">
													<a href="#">Components</a>
												</li>
												<li class="breadcrumb-item active" aria-current="page">Bredcrumbs Info</li>
											</ol>
										</nav>

									</div>
								</div>
							</div>
						</div>