Breadcrumb is a secondary navigation allowing the user to understand where the current page is located in the website architecture and to go back to previous steps or levels when needed.

Variations

Color themes

Every breadcrumb size variation is available both in light and dark version. This allows you to adapt the breadcrumb to the background of your designs.

Light mode

Dark mode

Breakpoint behaviours

Smaller breakpoints

Breadcrumb can't be fully displayed on smaller breakpoints, that is why this version allows you to go back on the previous level only.

Medium and larger breakpoints

For medium and larger breakpoints, you can display the whole path of the current page. We used some links to inform the user that the breadcrumb is clickable.

Do's and Don'ts