Breadcrumbs

Component checklist

Key Points

• Breadcrumbs provide navigational and orientation aid that helps users understand the structure and hierarchy of the site
• The current page should be displayed as the last item in the breadcrumb or as a clear page heading below
• A home icon button represents the home link
• Breadcrumbs should sit above the page title when used
• Text links longer than 12 characters are truncated to preserve space
• Truncated space should have a clear hit area of 44px
• This component is only used on web and React Native for web — native platforms use native header navigation instead

Use breadcrumbs to show users their current location within the site hierarchy and provide quick navigation back to parent pages.

File Links