Breadcrumb
Create breadcrumbs to show users their location within a website.
Usage
The Breadcrumb component consists of links, which are aligned side by side and separated by a divider. Add the .breadcrumb class to a <ul> or <ol> element to define the component. Use <a> elements as breadcrumb items within the list. An active state is automatically applied to the last <li> element.
To add list items without a link, simply use <li> element instead of an <a>. Alternatively, disable an <a> element by adding the .disabled attribute to the <li> element and remove the href attribute from the anchor to make it inaccessible through keyboard navigation.
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
Styles
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
<ul class="breadcrumb primary">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
<ul class="breadcrumb secondary">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
<ul class="breadcrumb dark">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
<ul class="breadcrumb gray">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
<ul class="breadcrumb success">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
<ul class="breadcrumb info">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
<ul class="breadcrumb warning">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
<ul class="breadcrumb danger">
<li><a href="#">Home</a></li>
<li>Butter Cake</li>
</ul>
Contact us
Report Bug
Request Feature
Submit Work