Breadcrumbs UI component for Figma — 86 variants

Simplifying Navigation

Use breadcrumbs patterns to organize hierarchical navigation across pages and categories. Keep the relevant state and next action clear so the component is easy to scan. Align labels and visual priority with the screen around it.

Enhancing User Experience

Show only parent steps that help users understand their location, and make earlier destinations actionable. Keep labels concise and use spacing or icon cues to reinforce the message without relying on color alone.

Improving SEO

In Figma, compare the component variants in a real product screen. Check spacing, contrast and labels across relevant states, then adapt the pattern to the team's design system. Document the selected variant and relevant states so the pattern stays consistent across screens.

Breadcrumbs UI - Component Overview

The Breadcrumbs UI component in Emvi UI provides hierarchical navigation cues that help users understand where they are and how to go back within the information architecture. It is optimized for products with deep content trees (e.g., admin panels, catalogs, documentation sites, and B2B apps) and prioritizes clarity, semantic consistency, and accessibility.

The implementation supports variable path lengths, smart truncation, responsive collapsing, and slots for icons or status elements. Visual separation uses characters like /, > or SVG icons, and clearly differentiates navigable links from the current page item (non-clickable by default). The system includes light/dark theme styles and adheres to typography, color, and spacing tokens to ensure consistency across the Design System.

Anatomy and Patterns

A typical breadcrumb includes:

- Container (wrapping nav) with aria-label="Breadcrumb" and an ordered/unordered list (<ol>/<ul>).
- Items (<li>) representing hierarchical levels (Home → Section → Subsection → Page).
- Separators (characters or icons) between items.
- Current item, marked with aria-current="page" and non-clickable by default.

Supported patterns:

- Home icon with optional label.
- Stateful items (e.g., disabled when permissions are missing).
- Microcopy additions (short subtitles or status badges).
- Horizontal scroll for very narrow viewports.

Types and Variations

Emvi UI ships several production-ready variations:

- Classic: text + separators.
- Icon-enhanced: icons per level (folder, product, document).
- Compact: collapses early levels into a "..." trigger with a popover menu.
- Truncated: shortens long labels depending on available width (with title/tooltip for full label).
- Responsive: switches from full to compact mode at defined breakpoints (e.g., md, sm).

All variations inherit typography, color, and spacing tokens. The current item uses a distinctive non-interactive style to avoid misleading click targets.

Scale, Spacing and Separators

The component defines size tiers SM, MD, and LG. Each size includes:

- Internal spacing to prevent overlaps with icons or badges.
- Separators scaled to the typographic baseline.
- Consistent horizontal gaps between items and separators.

Separator variants (/, >, • or SVG) use a muted text color to reduce noise and keep focus on labels.

Responsiveness, Truncation and Collapsing

For deep paths, Emvi UI provides:

- Multi-stage truncation: shortens middle levels first, preserving the beginning and end.
- Collapsing: turns middle levels into a "..." trigger with a full-path popover.
- X-scroll: enables horizontal scrolling in narrow containers.

Truncation rules avoid stripping critical tokens (IDs, key slugs) and maintain accessibility with tooltips and descriptive aria-labels.

Accessibility and Semantics

- nav container with aria-label="Breadcrumb"
- Semantic list <ol> or <ul>; each level as <li>
- Current item marked with aria-current="page"
- Links have visible focus states and adequate touch targets
- Keyboard support: sequential tabbing, Enter/Space activation, and Esc to close popovers in compact mode
- Contrast validated for text and separators in light/dark modes

Figma and Tailwind Integration

In Figma, the component ships as a nested structure with variants: size (SM/MD/LG), separator (text/SVG), collapsed (on/off), iconized (on/off). It uses Auto Layout and global token styles.

In Tailwind, the base relies on utilities such as flex, items-center, gap-x-*, text-sm|md|lg, text-muted-foreground, and inline-flex slots for separators. Compact mode adds hidden md:flex logic and a popover with vertical menu (flex-col, divide-y). The system is theme-aware and integrates data-state attributes for active states.

Best Implementation Practices

- Keep essential levels visible (Home and current page); collapse middle levels for deep paths.
- Avoid ambiguous labels; prefer short, meaningful names.
- Disable current-item navigation to prevent confusion.
- Provide tooltips or title for truncated labels and descriptive aria-labels.
- Match separator styling to interface density (lighter in dense UIs).
- Test keyboard flows and screen readers; validate contrast in both themes.