Breadcrumb
A secondary navigation aid that reveals the user's current location within a hierarchical structure, providing quick access to parent pages.
Documentation
Code
Status & Change logs
4.13.26
None-breaking
Added Breadcrumb component to the ELF Design System with full level and type support.
Added two separator types: Default (
/ slash) and Chevron (icon-based arrow).Added five depth levels — 1 through 4+ — to represent shallow to deeply nested navigation.
Added ellipsis truncation (
…) for the 4+ level variant to keep the trail compact.Added ARIA
aria-label="breadcrumb" and aria-current="page" for full accessibility compliance.2.18.26
None-breaking
Updated previous-item color from
#9aa4b2 to #a3a7ae to improve legibility at small text sizes.Improved separator alignment by switching from
margin to gap: 8px on the flex container.Overview
The Breadcrumb component is a secondary navigation pattern that shows the user's current location within the application's hierarchy. It lets users move back up to any parent level in a single click, reducing navigation overhead in deeply nested flows.
Types Default · Chevron
Levels 1 · 2 · 3 · 4 · 4+
Font Manrope 14px
Gap 8px between items
Anatomy
1 Previous page link
2 Separator
3 Current page (non-clickable)
Types
Usage Guidelines
Do
Use breadcrumbs in hierarchies with 2 or more levels of depth.
Place breadcrumbs at the top of the page content, below the global header.
Truncate long trails using the 4+ (ellipsis) variant to keep the UI compact.
Always mark the current page as non-interactive with
aria-current="page".
Don't
Don't use breadcrumbs for flat, single-level navigation structures.
Don't make the current page a clickable link — it should always be static text.
Don't use breadcrumbs as the primary navigation method; they are supplementary.
Don't mix separator styles (slash and chevron) within the same breadcrumb trail.
Breadcrumb Variants
Level
Type
Artboard