Breadcrumb | ELFBAR Design System

BREADCRUMB

When to Use

Example: trail above page content (skeleton)

Multi-level hierarchical sites where users need to understand their current location
Pages deeper than two levels that benefit from quick back-navigation
Admin dashboards, documentation sites, or e-commerce category flows
Not needed for flat single-level navigation or mobile-first apps with limited screen width

Usage Guidelines

Use only in sites/apps with a clear hierarchy (e.g. category → subcategory → detail page). The last item should always be the current page with no href. Keep the path complete — don't skip levels

Don’t

Don't use in flat-structured (non-hierarchical) applications. Don't use breadcrumbs as a substitute for primary navigation. Don't show more than 5 levels (consider collapsing middle levels beyond that)

Interaction Behavior

Levels	Use Case
2 levels	Root → current
3–4 levels	Typical category navigation
5 levels	Maximum recommended depth; consider collapsing beyond

Accessibility

Breadcrumb root uses semantic <nav> with aria-label="Breadcrumb"
Items are rendered in an ordered list <ol> for assistive technology
Current page item uses <span> (no link), providing clear indication of location