Metronic customizes the
										
Bootstrap Breadcrumb   through the SASS variables in
										
src/sass/components/_variables.scssand adds additonal options in
										
src/sass/components/_breadcrumb.scss.
 
									
									
									
										
										
										 
										
										
										Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.
										
										
										
										
										
										
											
											
												copy 
												
													
<ol class="breadcrumb text-muted fs-6 fw-bold">
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Home</a></li>
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li>
    <li class="breadcrumb-item px-3 text-muted">Active</li>
</ol>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add
										.breadcrumb-lineto enable line separator style for a breadcrumb.
										
										
										
										
										
										
											
											
												copy 
												
													
<ol class="breadcrumb breadcrumb-line text-muted fs-6 fw-bold">
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Home</a></li>
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li>
    <li class="breadcrumb-item px-3 text-muted">Active</li>
</ol>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add
										.breadcrumb-dotto enable dot separator style for a breadcrumb.
										
										
										
										
										
										
											
											
												copy 
												
													
<ol class="breadcrumb breadcrumb-dot text-muted fs-6 fw-bold">
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Home</a></li>
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li>
    <li class="breadcrumb-item px-3 text-muted">Active</li>
</ol>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add
										.breadcrumb-separatorlessto remove the separator.
										
										
										
										
										
										
											
											
												copy 
												
													
<ol class="breadcrumb breadcrumb-separatorless text-muted fs-6 fw-bold">
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Home</a></li>
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li>
    <li class="breadcrumb-item px-3 text-muted">Active</li>
</ol>