Breadcrumbs

Breadcrumbs are a list of links that help visualize a page’s location within a site's hierarchical structure, allowing users to navigate back to any of its parent pages.

Overview

Code

Anatomy

  1. Breadcrumb item
  2. Separator
  3. Condensed links
  4. Current page

Usage Guidelines

Use When

  • Helping users understand their location within a product.
  • Navigating content structured in a hierarchy with two or more levels.
  • Allowing users to backtrack or revisit previously viewed pages.
  • Providing contextual navigation that starts from a root page and shows the user’s path.

Best Practices

  • Keep breadcrumb labels short and concise. They should match the page titles or be intuitive enough to guide users.
  • The last item in the trail should indicate the current page and not be clickable.
  • Avoid showing too many breadcrumb levels. Too much detail can overwhelm users.

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

Breadcrumbs

Breadcrumbs are a list of links that help visualize a page’s location within a site's hierarchical structure, allowing users to navigate back to any of its parent pages.

Overview

Code

Anatomy

  1. Breadcrumb item
  2. Separator
  3. Condensed links
  4. Current page

Usage Guidelines

Use When

  • Helping users understand their location within a product.
  • Navigating content structured in a hierarchy with two or more levels.
  • Allowing users to backtrack or revisit previously viewed pages.
  • Providing contextual navigation that starts from a root page and shows the user’s path.

Best Practices

  • Keep breadcrumb labels short and concise. They should match the page titles or be intuitive enough to guide users.
  • The last item in the trail should indicate the current page and not be clickable.
  • Avoid showing too many breadcrumb levels. Too much detail can overwhelm users.

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

Breadcrumbs

Breadcrumbs are a list of links that help visualize a page’s location within a site's hierarchical structure, allowing users to navigate back to any of its parent pages.

Overview

Code

Anatomy

  1. Breadcrumb item
  2. Separator
  3. Condensed links
  4. Current page

Usage Guidelines

Use When

  • Helping users understand their location within a product.
  • Navigating content structured in a hierarchy with two or more levels.
  • Allowing users to backtrack or revisit previously viewed pages.
  • Providing contextual navigation that starts from a root page and shows the user’s path.

Best Practices

  • Keep breadcrumb labels short and concise. They should match the page titles or be intuitive enough to guide users.
  • The last item in the trail should indicate the current page and not be clickable.
  • Avoid showing too many breadcrumb levels. Too much detail can overwhelm users.

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

On This Page

Breadcrumbs

Breadcrumbs are a list of links that help visualize a page’s location within a site's hierarchical structure, allowing users to navigate back to any of its parent pages.

Overview

Code

Anatomy

  1. Breadcrumb item
  2. Separator
  3. Condensed links
  4. Current page

Usage Guidelines

Use When

  • Helping users understand their location within a product.
  • Navigating content structured in a hierarchy with two or more levels.
  • Allowing users to backtrack or revisit previously viewed pages.
  • Providing contextual navigation that starts from a root page and shows the user’s path.

Best Practices

  • Keep breadcrumb labels short and concise. They should match the page titles or be intuitive enough to guide users.
  • The last item in the trail should indicate the current page and not be clickable.
  • Avoid showing too many breadcrumb levels. Too much detail can overwhelm users.

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

On This Page

Breadcrumbs

Breadcrumbs are a list of links that help visualize a page’s location within a site's hierarchical structure, allowing users to navigate back to any of its parent pages.

Overview

Code

Anatomy

  1. Breadcrumb item
  2. Separator
  3. Condensed links
  4. Current page

Usage Guidelines

Use When

  • Helping users understand their location within a product.
  • Navigating content structured in a hierarchy with two or more levels.
  • Allowing users to backtrack or revisit previously viewed pages.
  • Providing contextual navigation that starts from a root page and shows the user’s path.

Best Practices

  • Keep breadcrumb labels short and concise. They should match the page titles or be intuitive enough to guide users.
  • The last item in the trail should indicate the current page and not be clickable.
  • Avoid showing too many breadcrumb levels. Too much detail can overwhelm users.

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

This component uses MUI (Material-UI) components, which are open-source and licensed under the MIT License.

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.