<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Breadcrumbs

A series of links indicating the user's location within the site's hierarchy. Allows users to return to pages higher up in the hierarchy.

Use Breadcrumbs...

On multi-level pages that have a hierarchy grouping such as:

  • Upper funnel category pages
  • Product detail pages
  • Gallery pages
  • Blog pages
  • Support pages

Don't use Breadcrumbs...

On single-level pages that have no logical hierarchy or grouping such as:

  • Studio experiences
  • Upsell / Cross-sell experiences
  • Cart or checkout
  • Account pages

Breadcrumbs

Breadcrumbs visualize the hierarchical site structure via a series of horizontal Links. These Links show the linear path from the home page to the current page.

The preview has been updated.

Hide current page

Use hideCurrentPage to hide the last breadcrumb item (the current page). Use true to always hide the last breadcrumb, or set different values for Responsive System breakpoints, for example {{ xs: true, sm: false }}

The preview has been updated.

Truncation

For breadcrumb paths longer than 4 links, only the Home, current page and previous page links are always visible. The rest are visually hidden behind a ... link. Expanding the ... reveals the rest of the breadcrumb path. This takes up the available width and then wraps to multiple lines.

The preview has been updated.

SEO structured data

Use the SEO-friendly structured data format below for Breadcrumbs. This format informs search engine bots that the links belong to structured Breadcrumbs, enhancing the SEO impact. Contact #help-seo with any questions.

General

  • Breadcrumbs are an important navigational element to support wayfinding — making users aware of their current location within the hierarchical structure of a website.
  • Breadcrumbs appear at the top of every page, before page content.
  • Ensure the current page breadcrumb is a Link. This helps assistive technologies in announcing the current page.
  • Breadcrumb links should match 1:1 to the text of the page title, and the text of the page URL.
  • The breadcrumb path should reflect the number of steps the user has taken. Avoid skipping levels of hierarchy.
  • Breadcrumb links should display a hierarchically correct, linear trail.
  • Breadcrumb links should be intuitive and predictable in their destinations. The destination should match the displayed breadcrumb text wherever possible.
  • The Home breadcrumb is always the first link in the path and always visible.

SEO considerations

  • The hierarchy-based breadcrumb is the most efficient type from an SEO standpoint. It provides a clear understanding of the depth of the site architecture, starting from the top-level category and progressing down to the current page.
  • Breadcrumbs help Google better understand and contextualise the pages within the site structure. Additionally, the internal links they generate allow link equity to flow between related pages, distributing it more effectively and influencing the discoverability and crawlability of the pages.
  • If a page belongs to two-parent pages, display one of those parents on the Breadcrumbs to make it easier for bots.
  • If properly marked up with structured data, they can also be displayed in the organic listing; refer to SEO structured data.

Accessibility

  • Do not truncate individual words in the breadcrumb trail. The component truncates the breadcrumb path when there are more than 4 links. It also takes up the available width and then wraps to multiple lines. However, to aid with readability, avoid breadcrumb links that are too long.
  • The breadcrumb trail must not restart at any point. The first link in the path will always be Home.

Props

Breadcrumbs
This component is implemented using the <nav /> as the root element. You can utilize the native attributes supported by <nav /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddefault
accessibleTextForMore
Set accessible text for the "more" button
⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
string | nullfalse
null
hideCurrentPage
Hide the last breadcrumb item (current page) `true` hides at all breakpoints; use the responsive object form for per-breakpoint control, where explicit `false` restores visibility from that breakpoint up. **Accessibility:** hidden breadcrumbs are invisible in the a11y tree. Only use when a visually adjacent H1 provides the current page context for assistive technology. @example hideCurrentPage={{ xs: true, sm: false }} // hides only on xs
Responsive<boolean>false
null
BreadcrumbsContainer
This component is implemented using the <nav /> as the root element. You can utilize the native attributes supported by <nav /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
BreadcrumbList
This component is implemented using the <ul /> as the root element. You can utilize the native attributes supported by <ul /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Breadcrumb
This component is implemented using the <li /> as the root element. You can utilize the native attributes supported by <li /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Internationalization

SWAN's Internationalization System allows SWAN components to render with fully translated and accessible text out-of-the-box. The following keys are provided to allow you to override the default translation.

Default TextKey
More
Accessible label for a button that expands to show more links in a breadcrumbs navigation
breadcrumbs.accessible-text-for-more-button

Related