Make sure your visitors never get lost

Note: You need castlecss-breadcrumbs or the castlecss-boilerplate for this.

Feel free to use these breadcrumbs to get you started. Create your own breadcrumbs.scss to overwrite the standard breadcrumbs or edit your variables document for different colors/styles.


Changing the breadcrumb separator

The default separator between the breadcrumbs is the double arrow ».
To set a different character as your separator for all crumbs, please overwrite the variable $breadcrumbs-separator.

If you want a different character for a specific separator, please add the attribute data-breadcrumbs-separator and give it the value of your separator.

Example: data-breadcrumbs-separator="/" sets a / as separator

Breadcrumbs font-size

Class Value
breadcrumbs $font-size-default
breadcrumbs-small font-size: 1.4rem;


Please take a look at the Google Developer website for making breadcrumbs SEO friendly