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.

Class Description
.f-breadcrumb Add this class to a <ul> element to define the Breadcrumb component. Use <a> elements as breadcrumb items within the list.
.f-active Add this class to a list item to apply an active state and use a <span> instead of an <a> element.

Use a <span> instead of an <a> element to disable a breadcrumb item.

Example

Markup

<ul class="f-breadcrumb">
	<li><a href="">...</a></li>
	<li><a href="">...</a></li>
	<li><span>...</span></li>
	<li class="f-active"><span>...</span></li>
</ul>