Skip to main content

Breadcrumbs

Breadcrumbs are navigational aids that show users their current location within a hierarchical structure, empowering them to navigate confidently up the hierarchy. Designed with care to provide clear wayfinding while maintaining visual simplicity, breadcrumbs inspire users to explore our applications with a strong sense of orientation and control.

View in Storybook

When to Use​

Use breadcrumbs when you need to help users understand their location within a multi-level navigation structure and provide easy access to parent pages. Breadcrumbs are perfect for deep hierarchical content where users benefit from knowing their path and having quick access to higher-level sections.

Structure​

The breadcrumbs consist of:

  • Clickable links that connect to actual pages, providing functional navigation
  • Current page indicator that shows the user's present location
  • Visual separators that create clear hierarchy and flow
  • Responsive behavior that adapts gracefully to different screen sizes and content lengths

Each element works together to create a clear navigational path that guides users through our content hierarchy.

Guidelines​

  • All links in breadcrumbs must be clickable and connect to actual pages for functional navigation
  • Always place breadcrumbs in the uppermost left corner of the page, positioned below the main navigation
  • When breadcrumbs become too long for the available space, choose from three thoughtful solutions:

Auto-collapse​

Breadcrumbs can auto-collapse using ellipses (...) to indicate hidden middle pages. The first and current pages remain visible, and clicking the ellipses expands the full breadcrumb trail for complete context.

Expanded breadcrumbs​

Allow breadcrumbs to wrap naturally to two or more lines when space permits, maintaining full visibility of the navigation path.

Truncation​

Long individual labels can be truncated based on pixel width, always ending with ellipses to indicate additional content. Provide tooltips on hover or long press to reveal the complete label text.

Implementation in Figma​

  1. In Figma go to the Assets Panel and search for breadcrumbs
  2. Drag and drop the component in your frame
  3. Choose the variant from the Design Panel

Do's and don'ts​

✅ Use breadcrumbs in addition to main navigation

✅ Use breadcrumbs with multi-level applications

❌ Do not use breadcrumbs as main navigation

❌ Do not use breadcrumbs for single-level applications