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.
