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