Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Breadcrumb
The breadcrumb component is a secondary navigational pattern that allows users to move between and obtain context of various levels of hierarchy.
Example
Mouse Over or Focus to See the Full Text of Long Content Which Are TruncatedShort Texts Will NotThe Current Place

See live code examples in Storybook
Usage

Breadcrumbs are effective when content is organized in a hierarchy of more than two levels, providing context for the user's location.

Best practices
Dos
  • Use relevant portions of page titles as their link text.
  • Use clear, concise and consistent organization of pages for pathing or showing the location of the content being shown in the breadcrumb.
Don'ts
  • Don't use breadcrumbs as the primary form of navigation.
  • Don't use breadcrumb-items outside of the breadcrumb component.
Accessibility What's built in
  • Ensures component uses the correct semantic nav element with an aria-label="breadcrumb".
  • Utilized ol to programmatically group each breadcrumb item in the list.
  • Each listitem has role="listitem" to ensure that the list association is properly conveyed.
  • Provides built-in focus styles that meet WCAG contrast and visibility requirements.
  • Truncated text can be exposed via hover or keyboard focus.
Considerations Design
  • Breadcrumb placement is consistent across the site and is placed above the main content area.
  • Ensure the breadcrumb is not used as a primary navigation element.
Development
  • Verify the pharos-breadcrumb-item has a valid href attribute.
Importance

Helps users understand where in the site they currently are visiting

Visual expectations

A trail of links pertaining to parental content separated by forward slashes

Expected actions Screen reader

Reads links in breadcrumb in order

Keyboard
  • Links in breadcrumb are focused in order with tab
Relevant best practices and WCAG guidelines
  • Breadcrumb pattern from WAI-ARIA Authoring Practices
  • 4.1.2: Name, Role, Value (Level A)