Breadcrumb
Usage
When there are at least two levels in a page hierarchy, breadcrumb navigation helps the user understand where they are on a website or web app. It allows them to navigate to a parent page of the page they’re currently viewing, making other content more discoverable as well.
Variants
Default
The unlinked page titles and separators in the default variant uses the --rh-color-text-primary-on-light or --rh-color-text-primary-on-dark for the text color.
Subtle
The unlinked page titles and separators in the default variant uses the --rh-color-text-secondary-on-light or --rh-color-text-secondary-on-dark for the text color.
Responsive design
Size and spacing remain consistent for breadcrumbs at all screen sizes. The breadcrumbs will wrap to fit their container.
Large breakpoints
Small breakpoints
Best Practices
When not to use
Breadcrumbs should not be used as the main navigation.
Do use breadcrumbs to supplement the primary or secondary navigation element.
Do not use breadcrumb navigation as the main way for users to navigate a website.
They should also not be used if there is only one level in the page hierarchy or if the current page is at the top of the page hierarchy.
Do use breadcrumbs if there are at least two levels in a page hierarchy.
Do not use breadcrumbs if the current page is first in the page hierarchy.
Use consistent placement
Breadcrumbs should be placed consistently above the page title and below the primary (and secondary nav, if it’s used). Any other location on the page is not a common spot for breadcrumbs and is thus less easily found and recognized as breadcrumbs.
Do place breadcrumbs in a familiar and consistent place for this type of navigation element.
Do not add breadcrumbs above a primary or secondary navigation element or anywhere else on the page.
Avoid customizing link titles
The page titles used in breadcrumbs should be consistent with what is used in the navigation and on the individual pages. Avoid changing the page titles in order to prevent user confusion.
Do keep the same page title in the heading and in breadcrumb navigation.
Do not change the title in the breadcrumbs only.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
