Skip to content

Breadcrumbs

Description

Breadcrumbs is a component for displaying the "user's path" on the website. It's usually used as an additional navigation element.

Why breadcrumbs are useful:

  • they unobtrusively show the users which page they are on;
  • they help you link to other pages on the site (useful for SEO);
  • they allow you to move between higher/lower nesting navigation levels without clicking the forward/backward buttons in the browser.

Don’t use breadcrumbs on the main pages.

Appearance

Links inside this component have custom styles.

TIP

The last item in the breadcrumbs is always non-clickable.

Breadcrumbs styles
ElementStyles
Linkfont-size: var(--fs-200), line-height: var(--lh-200), color: var(--text-secondary), cursor: pointer
ChevronRight iconcolor: var(--icon-secondary-neutral)

Margins

Margins between the links inside the breadcrumbs is 8px.

If there isn’t enough place for the breadcrumbs (screen is too small or the text is too long), items are truncated into ellipsis.

TIP

Don't forget to check whether the full text is displayed in a tooltip. Refer to our example.

Interaction

Breadcrumbs states
StateStyles
Normalfont-size: var(--fs-200), line-height: var(--lh-200), color: var(--text-secondary), cursor: pointer
Hovercolor: var(--text-primary), text-decoration: underline
Activecolor: var(--text-primary)

Usage in UX/UI

The recommended order of the navigation levels in the breadcrumbs:

  1. The first link is the product's Projects and/or the product's home page.
  2. The second link is the Name of the project.
  3. The third link is the Name of the product.

Released under the MIT License.

Released under the MIT License.