Breadcrumbs Component

Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website. (GOV.UK Design System (opens in a new tab))

• Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.
• If you're using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.
  (GOV.UK Design System (opens in a new tab))

• You should display the component in the top left of the main content area above the page title.
• Reflect the names of the parent-level pages ensuring you use the same labels and casing as the main IA.
  (NSW Government Design System (opens in a new tab))

When list items are truncated into a menu but the label text is still too large for the horizontal space, truncate the text with an ellipsis. By default, truncation should occur at the end of the title. If your users need to see the end of truncated titles, truncating the middle of the title is acceptable.

As has written in the sample code, we have set text-overflow: ecllipese and overflow: hidden for the li a in css code to avoid this happens. (React Spectrum (opens in a new tab))

Though we should not wrap the list items, we should never truncate more than one breadcrumb label. Prioritize using the truncation menu when breadcrumb labels are long. If the current location has a long label, all items can be truncated into the menu.

Truncation should be avoided by way of the breadcrumbs overflow behavior, although in some cases the final breadcrumb title may truncate with an ellipsis. (React Spectrum (opens in a new tab))

Be mindful of your user's cognitive load and truncate breadcrumbs appropriately. Displaying too many levels can be overwhelming. By displaying only 4 items in the hierarchy (including the root item, if you are displaying it), users will quickly understand context while still having easy access to any truncated options. Truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. (React Spectrum (opens in a new tab))

Don't use icons within the labels for breadcrumbs. Since breadcrumbs labels are horizontally distributed, icons disrupt the rhythm and readability of the list. Also, icon may affect the accessibility for the user with visual impairments. (React Spectrum (opens in a new tab))

Developers should use the nav element “Breadcrumb" to make navigation easier for people who use screen readers and other assistive technologies. Using an ordered list helps to ensure that the breadcrumbs are interpretable for a variety of technologies, including those that don't fully support ARIA. (Bureau of Internet Accessibility (opens in a new tab))

Screen readers will announce non-decorative separators as part of the content, which can make breadcrumb menus frustrating for users. Use CSS or the aria-hidden="true" attribute for a better user experience. (Bureau of Internet Accessibility (opens in a new tab))