Base Breadcrumb

[slowbot]

Breadcrumbs provide secondary navigation to help users understand where they are in a website.

When to use the breadcrumb component

• When orientation matters. Breadcrumbs show where the current page is located in the website hierarchy. Use a breadcrumb when it's likely that a user will arrive at an interior page from search or from an outside link.

When to consider something else

• Simple sites. If the website is not very deep and the context for the current page is clear from the main navigation.
• Step-by-step processes. Use breadcrumbs for hierarchical relationships, not linear relationships (like individual steps in a multi-step process).
• Redundant side navigation. When side navigation is used in combination with main navigation, it may be redundant to include breadcrumbs.

Usability guidance

• Use complete page titles. Use the same wording in breadcrumb text as in the page title.
• Consider alternatives to wrapping. For example, a mobile-friendly breadcrumb may show only a page's direct parent.

Accessibility

• Use the nav element. This allows assistive technology to present the breadcrumbs in context as a navigational element on the page.
• Use ordered lists and list items. Use an ol for breadcrumbs and an li for each item. This allows assistive technology to enumerate the items in the breadcrumbs and allows shortcuts between list items.
• Use ARIA markup for additional context. Use aria-label="Breadcrumbs" on the main element and aria-current="page" on the current page.

Implementation

Field	Value	Name
Label	item label
URL	item url
URL attributes	item attributes including current state

Variants	Values	Name
Wrap	truncate (default) or wrap

Related USWDS Components

• Breadcrumbs

Theme

Element	Effects	Global/Component
$theme-breadcrumb-background-color	Background color	Component
$theme-breadcrumb-font-family	Breadcrumb	Component
$theme-breadcrumb-font-size	Breadcrumb	Component
$theme-breadcrumb-gap	Layout	Component
$theme-breadcrumb-link-color	Link	Component
$theme-breadcrumb-min-width	Layout	Component
$theme-breadcrumb-padding-bottom	Layout	Component
$theme-breadcrumb-padding-top	Layout	Component
$theme-breadcrumb-padding-x	Layout	Component
$theme-breadcrumb-separator-color	Separator	Component
$theme-jcc-breadcrumb-reverse-link-color	Link	Component/Custom

Questions:

• Should be make "back" / parent link the default mobile use case?

Figma:

https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=267%3A995
https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=267%3A1034