Breadcrumbs
Simple Breadcrumbs
Html
<ol class="breadcrumb1">
<li class="breadcrumb-item1 active">Home</li>
<li class="breadcrumb-item1 active">About</li>
</ol>
<ol class="breadcrumb1">
<li class="breadcrumb-item1"><a href="#">Home</a></li>
<li class="breadcrumb-item1 active">Library</li>
</ol>
<ol class="breadcrumb1">
<li class="breadcrumb-item1"><a href="#">Home</a></li>
<li class="breadcrumb-item1"><a href="#">Library</a></li>
<li class="breadcrumb-item1 active">Data</li>
</ol>
Custom Styling
Html
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-style1 mb-0 p-0">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
Custom Divider
Html
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-style2 mb-0 p-0">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>Color Breadcrumbs
Html
<ol class="breadcrumb1 bg-blue">
<li class="breadcrumb-item1 active text-white">Home</li>
<li class="breadcrumb-item1 active text-white">About</li>
</ol>
<ol class="breadcrumb1 bg-secondary">
<li class="breadcrumb-item1"><a href="#" class="text-white">Home</a></li>
<li class="breadcrumb-item1 active text-white">Library</li>
</ol>
<ol class="breadcrumb1 bg-success">
<li class="breadcrumb-item1"><a href="#" class="text-white">Home</a></li>
<li class="breadcrumb-item1"><a href="#" class="text-white">Library</a></li>
<li class="breadcrumb-item1 active text-white">Data</li>
</ol>Icon Breadcrumbs
Html
<nav aria-label="breadcrumb">
<ol class="breadcrumb1 border bg-transparent">
<li class="breadcrumb-item1 active"><i class="fa fa-star-o mr-2 white-text" aria-hidden="true"></i>Home</li>
<li class="breadcrumb-item1 active">About</li>
</ol>
<ol class="breadcrumb1">
<li class="breadcrumb-item1"><a href="#" class=""><i class="fa fa-star-o mr-2" aria-hidden="true"></i>Home</a></li>
<li class="breadcrumb-item1 active"><i class="fa fa-star-o mr-2" aria-hidden="true"></i>Library</li>
</ol>
<ol class="breadcrumb1 bg-primary mb-0">
<li class="breadcrumb-item1"><a href="#" class="text-white"><i class="fa fa-star-o mr-2 white-text" aria-hidden="true"></i>Home</a></li>
<li class="breadcrumb-item1 text-white"><a href="#" class="text-white"><i class="fa fa-star-o mr-2 white-text" aria-hidden="true"></i>Library</a></li>
<li class="breadcrumb-item1 active text-white"><i class="fa fa-star-o mr-2 white-text" aria-hidden="true"></i>Data</li>
</ol>
</nav>Style Breadcrumbs
Html
<ol class="breadcrumb breadcrumb-arrow mt-3">
<li><a href="#">Home</a></li>
<li class="active"><span>Data</span></li>
</ol>
<ol class="breadcrumb breadcrumb-arrow mt-3">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active"><span>Data</span></li>
</ol>
<ol class="breadcrumb breadcrumb-arrow mt-3">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Elements</a></li>
<li class="active"><span>Data</span></li>
</ol>Svg Breadcrumb
Html
<ol class="breadcrumb border p-4 mb-4">
<li class="breadcrumb-item"><a href="#" class="d-flex"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3zm5 15h-2v-6H9v6H7v-7.81l5-4.5 5 4.5V18z"/><path d="M7 10.19V18h2v-6h6v6h2v-7.81l-5-4.5z" opacity=".3"/></svg><span class="breadcrumb-icon"> Home</span></a></li>
<li class="breadcrumb-item active"><span>Data</span></li>
</ol>
<ol class="breadcrumb border p-4 mb-4 bg-light">
<li class="breadcrumb-item"><a href="#" class="d-flex"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3zm5 15h-2v-6H9v6H7v-7.81l5-4.5 5 4.5V18z"/><path d="M7 10.19V18h2v-6h6v6h2v-7.81l-5-4.5z" opacity=".3"/></svg><span class="breadcrumb-icon"> Home</span></a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active"><span>Data</span></li>
</ol>
<ol class="breadcrumb p-4 bg-primary br-3 overflow-hidden">
<li class="breadcrumb-item text-white"><a href="#" class="d-flex text-white"><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3zm5 15h-2v-6H9v6H7v-7.81l5-4.5 5 4.5V18z"/><path d="M7 10.19V18h2v-6h6v6h2v-7.81l-5-4.5z" opacity=".3"/></svg><span class="breadcrumb-icon"> Home</span></a></li>
<li class="breadcrumb-item text-white"><a href="#" class="text-white">Library</a></li>
<li class="breadcrumb-item text-white"><a href="#" class="text-white">Elements</a></li>
<li class="breadcrumb-item active text-white"><span>Data</span></li>
</ol>