Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Breadcrumbs

v.1.0.0 | Saturn
Healthy
StorybookFigma

List of links that help visualize a page's location within a site's hierarchical structure.

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Label
Required
Name of each of the navigation level where the user has navigated. They are clickable links for the user to retrace his steps. The last one is allways in active state and it’s not clickable.

2

Icon
Provides a distintion between the levels of navigation.

3

Container
Required
Maximun of 203 characters.

States

Default

  • A default state communicates an interactive component or element.

    • Hover

  • The hover state communicates that a component is interactive.

    • Active

  • An active state communicates a highlighted destination, whether initiated by the user or by default. This state is used for the last item in the breadcrumb trail (which is the user current location), and is not clickable.

    • Keyboard focus

  • A keyboard focus state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.

    • Behaviours

    • How to navigate breadcrumbs

    The user can quickly navigate by clicking on any of the levels to move through the different hierarchy levels of the web, either the main level and prior to the current page. The current page, at the level the user is at, is not cyclable.

    Foo

    • When ellipsis appears

    If the breadcrumb content is longer than it can grow inside the parent, the breadcrumb text will collapse to a maximum of 20 characters (20 rems) and an ellipsis will be displayed. This applies to all levels except the last one.

    Foo

    • When the ellipsis appears at the last level

    If the text in the last level is so long that it cannot go to a line when the other levels are already collapsed, ellipses will appear in this last level until it adapts to the screen resolution.

    Do's and dont's

    Foo

    Do’s

    Don’t show too many breadcrumbs at once. By displaying only 5 items in the hierarchy (including the root item, if you are displaying it), users will quickly understand context while still having easy access to any truncated options.

    Foo

    Do’s

    Any level can be truncated.

    Foo

    Don’t

    Do not completely truncate levels.

    Foo

    Do’s

    Ellipses will appear in the last level when the width of the component is greater than the screen resolution.

    Foo

    Don’t

    Breadcrumbs will never go beyond two lines.

    BreadcrumbsUsage
    BreadcrumbsCode API