General guidelines
Use breadcrumbs to show pages that separate the Homepage from the current page. Along with showing users where they are, it allows them to quickly go back to a parent level or previous one.
Never use a breadcrumb to show the user’s path.
Breadcrumbs are only used for the hierarchical structure of a site; opt for the stepper for any other paths (e.g. for a marketing funnel). Due to its complementary role, a breadcrumb should never be integrated into the main content.
Best practices
The last element of the breadcrumb must always be the same as the current page’s title.
Don’t put various titles. Keep it consistent.
Always use an expandable icon when there is more than three links in the breadcrumb.
Don’t use too many links. It will break the layout and confuse the user.
Visual guidelines
Breadcrumbs are always located at the top left of the page, typically below the header bar.
The breadcrumb is displayed in the form of a line of text in which each page is a distinct link separated by an arrow. Each link should be separated by a “>“ to clearly show the chronology. The chronology must always be shown from left to right (the element furthest to the left must be the homepage) and the nearest the actual page.
Each element of the breadcrumb is a link and mirrors its characteristics.
Behaviours
When using more than 3 elements in the path, we recommend using a button at the second level to display the third, fourth and fifth level. This way, we can avoid long breadcrumbs on several lines.
Visual variants
The Breadcrumb is using the standard interactive states (default, hover, active, focus). On a mobile device, use a back ghost button on the top left of the screen.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.