EDS – Equinor Design System

Navigation breadcrumbs

Breadcrumbs show the navigational path to users allowing them to navigate up the hierarchy.

Guidelines

Breadcrumbs allow users to quickly trace or move up the navigation hierarchy. All links in breadcrumbs are clickable, meaning they all must have a page attached. Breadcrumbs are always placed in the uppermost left corner of the page, but below the Topbar.

Don’t

  • Do not use breadcrumbs as main navigation.
  • Do not use breadcrumbs for single-level applications.
  • Do not change the height of the tabs.

Variations

FigmaExternal linkFigma design of breadcrumb

Breadcrumbs that are many levels deep might not always fit in the space available on a single line, in this case there are three options:

Auto-collapse

Breadcrumbs can auto-collapse and use ellipses (…) to indicate the middle pages. The first and current/last page are shown in auto-collapsed breadcrumbs, clicking the ellipses expands the breadcrumbs.

Expanded breadcrumbs

Expanded breadcrumbs can wrap to two or more lines.

Truncation

Long labels can be truncated based on pixel width. Truncated labels should always end with an ellipses to indicate there is more text not shown. On hover or long press, a tooltip should appear to show the full label.

✏️ Edit this page on GitHub