Components

Breadcrumb

sketch:Readyscss:Ready
vue
:Ready

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.

preferences

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 & dont's

Always place the breadcrumb at the top of the page under the header.
Use breadcrumb for three or more architecture levels.
Don't use breadcrumb on a website that has two architecture levels only.