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.


Basic example


Line seperator


Dot seperator


Arrow seperator


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: