Specifications
- Breadcrumbs progress from the highest level to the lowest, one step at a time.
- Breadcrumb navigation starts with the homepage and ends with the current page.
- All links, except the last one, in a breadcrumb should be clickable.
- Breadcrumb trails are displayed horizontally before a page’s main content, in the top half of the page, below the primary navigation menu if a horizontal menu layout is used.
- The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.
- Nothing should go on the same line as the breadcrumb navigation.
Default
Breadcrumbs with Icons
Accessible Option
Behaviors
- For implementations with large numbers of sub-directories, make use of ellipses and dropdowns as shown in the example below
Editorial
- Editorial will be provided by the hierarchy in a location based breadcrumb.
- Editorial for path-based breadcrumbs are always dynamically generated by the steps taken in a workflow.