Breadcrumbs

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Read the Official Bootstrap Documentation for a full list of instructions and other options.


Defalult breadcrumb


Breadcrumb variations

Add class .bg-* for solid colored breadcrumb.


Inverse breadcrumbs

Add class .bg-inverse-* for inverse skin.


Changing the separator

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this:

It’s also possible to use a base64 embedded SVG icon:

The separator can be removed by setting $breadcrumb-divider to none: