Create an ordered list, apply the .breadcrumb class, then set .crumb and .crumb-separator to each list item.

<ol class="breadcrumb">
	<li class="crumb"><a href="/">Home</a></li>
	<li class="crumb-separator" aria-hidden>&rsaquo;</li>
	<li class="crumb"><a href="/articles">Articles</a></li>
	<li class="crumb-separator" aria-hidden>&rsaquo;</li>
	<li>Current</li>
</ol>

Non-Responsive

Breadcrumbs are responsive by default and will auto-hide all but the last two crumb elements on small screens. If you wish to disable this behavior, replace .breadcrumb with .breadcrumb-nonresponsive.

<ol class="breadcrumb-nonresponsive">...</ol>

Using Icons

Add your icon before or after your anchor tag within the .crumb list item.

<li class="crumb">
	<span>(icon)</span>
	<a href="/">Home</a>
</li>

Separators

Apply the .crumb-separator class to each list item containing your separator icon or unicode symbol. Per accessability, make sure to implement aria-hidden to hide this element from screen readers.

<li class="crumb-separator" aria-hidden>&rsaquo;</li>

<li class="crumb-separator" aria-hidden>(icon)</li>

Current Page

We recommend the last item not include an anchor link, as this indicates the page the user is currently on.

<li>Current</li>