Select your language
Select other languages

Automatic translation

Loading translator…

Magoomake your components work correctlyBack to homepage

Breadcrumb

Shows the page's location in the hierarchy and offers paths back to previous levels.

For working examples and design patterns for this component, see the references tab (opens the references on this page).

COMPONENT GUIDE

Explore behaviors before defining the interface.

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use to show the current location within a hierarchy and return to earlier levels.

What to draw

Show levels in order, separators, and a distinguishable current page.

How it behaves

Links lead to earlier levels and activate with Enter. The last item represents the current page; separators do not receive focus.

What to document in Figma

Record destinations and current-page identification, avoiding navigation actions on the current item.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Breadcrumb.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

  1. Before interacting, can you visually tell that the component is interactive?
  2. Before interacting, can you visually tell that this is a navigation menu?
  3. Before interacting, can you visually tell the indicated current position?

Designing for mouse use (any pointing device)

  1. Is there visual feedback when hovering over actionable components?
  2. Is there visual feedback when clicking the actionable component?
  3. Does clicking an actionable component load the screen and update the components' states?

Designing for gesture use

  1. Is there visual feedback when activating the component?
  2. Does activating an actionable component load the screen and update the components' states?

Designing for keyboard use (any non-pointing device)

  1. Is there visual feedback when focusing the actionable component?
  2. Can you interact with the actionable component using the "enter"?
  3. When activated by keyboard, does the actionable component take the person to its corresponding content?

Designing for screen reader use

  1. When focusing an actionable breadcrumb component, can you hear that it is a link rather than a button?
  2. When focusing an actionable breadcrumb component, can you clearly hear the link's purpose?
  3. When focusing the final breadcrumb item, can you hear that it is the current screen and does not navigate anywhere?

Interaction methods

Possible interaction methods for components of type Breadcrumb.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

  • On hover, the component should provide visual feedback confirming that interaction is possible.
  • On a mouse click, the component should provide visual feedback confirming the click.
  • On a mouse click, the content should load.
  • When clicking with the mouse, does the final item avoid navigating anywhere and represent the current screen?

Keyboard interaction (any non-pointing device)

  • When focused with the keyboard, the component should provide visual feedback with a visible focus indicator.
  • It should be possible to navigate to the next or previous item using the TAB or SHIFT+TAB keys respectively.
  • It should be possible to activate actionable components with the ENTER.
  • The last item may receive focus but should not be actionable.
  • Component separators do not receive keyboard focus.

Keyboard (or gesture) interaction + screen reader

  • When focusing the breadcrumb group, you can identify it as an ordered list.
  • When focusing an actionable breadcrumb component, you can hear that it is a link.
  • When focusing an actionable breadcrumb component, you should be able to clearly identify the link's purpose.
  • If focus is configured on the final breadcrumb item, you should be able to hear that it is the current screen.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing breadcrumbs

Keyboard navigation

  1. WHEN I use the Tab to activate a link
  2. The focus I SEE is strongly indicated visually
  3. THEN, when I use the Enter to activate the link
  4. I SEE my browser navigating somewhere

Desktop screen reader

  1. When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and use the Tab key to move focus to a link
    • I SEE that link names match destination page titles
    • I HEAR links identified as reference points in a breadcrumb navigation system.
    • I HEAR the current page link indicated when focus is on the page.
    • I can HEAR screen reader shortcuts as a navigation landmark.
  2. THEN, when I use the Enter to activate the link
  3. I HEAR that my browser is navigating somewhere.

Mobile screen reader

  1. WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus a link, the following happens:
    • I HEAR that link names match destination page titles
    • I HEAR links identified as reference points in a breadcrumb navigation system.
    • I HEAR the current page link indicated when focus is on the page.
    • I can HEAR screen reader shortcuts as a navigation landmark.
  2. THEN, when I double-tap to activate the link
  3. I HEAR that my browser is navigating somewhere.

Considerations

Considerations for components of type Breadcrumb.

  • Component separators should be purely visual and should not receive keyboard focus or be read by screen readers.
  • Breadcrumbs are navigation components in an ordered list. Implement them with appropriate semantics.
  • The final breadcrumb item should not be actionable because it is the current screen. However, you may configure keyboard focus to announce that it is the current screen.

References

Additional references for components of type Breadcrumb.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.

Design patterns

Design System

Original content by Marcelo Sales, initially used in the AccessBoost course (external link - opens in a new window). These interactions represent standard industry patterns, but may be customized in specific cases, provided there are sufficient instructions for people to understand the behavioral change.