Breadcrumbs

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.

Example

				
					
						
							Home
						
						
							Main category
						  
						
							Sub category
						
						
							This page

Options

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;

Seo

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