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: