Breadcrumbs

🧭 When to Use Breadcrumbs

Use Breadcrumbs when:

• Users need a sense of location within a hierarchy

• The product contains nested views or deep navigation

• You want to allow users to move backward quickly without using the back button

Avoid using Breadcrumbs in single-level or linear experiences where there’s no clear hierarchy or return path.

🔗 Breadcrumb Items

Each Breadcrumb is made up of one or more Breadcrumb Items, arranged in order from highest to lowest level in the hierarchy. Items can be text-based or icon-based depending on the use case.

🎨 Types

• Default – Clean, neutral style with no decoration

• Underline – Adds an underline to indicate interactivity; useful for minimal or text-focused interfaces

• Filled – Highlights the item with a background or pill-style container; ideal for high-contrast or app-like UIs

🧠 Modifiers

• Text – Standard breadcrumb item with label (e.g. “Settings”)

• Icon – Use an icon in place of the label (e.g. a home icon); ideal for the root item or when space is limited

These can be toggled via a layer property in Figma.

🎯 States

• Unselected – All items except the last one in the breadcrumb trail

• Selected – The current/active page; typically styled without hover behavior

States determine the visual emphasis and whether or not the item should be interactive.

🚦 Status

• Default – Idle state with no interaction

• Hover – Slight background or underline appears to indicate clickability

• Focus – Visible ring or outline for keyboard users

Selected breadcrumb items should not be hoverable or focusable—they’re static indicators.

📏 Sizes

• Medium (md) – Standard size for most applications

• Large (lg) – Ideal for dashboards, mobile UIs, or hero sections where more visual weight is needed

Size tokens affect the font size, spacing, and icon scale within each breadcrumb item.

🔗 Breadcrumb (Composite Component)

The Breadcrumb component combines multiple Breadcrumb Items and handles spacing, dividers (typically chevrons), and layout responsiveness.

🎨 Types

• Default – Clean, neutral trail

• Underline – Adds underline interaction for clickable items

• Filled – Each breadcrumb item appears within a pill-style background for stronger visual separation

These types should match the item type (e.g. if the breadcrumb is set to "filled", its children should also use "filled" for consistency).

📏 Sizes

• Medium (md) – Used in typical navigation bars or form headers

• Large (lg) – Used in hero sections, top-level dashboards, or workflows with more emphasis

Spacing between items and dividers adapts automatically based on the size.

♿ Accessibility Considerations

From a design perspective:

• Use visual contrast to clearly indicate interactivity

• Keep the current (selected) item visually distinct

• Avoid using breadcrumb icons alone unless they’re extremely familiar (like a home icon)

From a code perspective (if implemented):

• Use nav with aria-label="breadcrumb"

• Mark the current page with aria-current="page"

• Use an ordered list (<ol>) with li items and anchor tags where appropriate

✅ Best Practices

• Limit breadcrumb length to 3–5 items max—collapse or truncate long paths

• Always ensure the last item is the current page and not clickable

• Don’t mix breadcrumb styles (e.g., don’t underline some and fill others within the same trail)

• Make sure icons are clearly recognizable if used in place of text