Breadcrumb

The breadcrumb is to provide a consistently-placed and styled affordance to orient and move up a hierarchy.

  • Install
    npm install @pluralsight/ps-design-system-breadcrumb
  • Import
    import Breadcrumb from '@pluralsight/ps-design-system-breadcrumb'

Examples

The breadcrumb should be placed toward the top left of the page below any persistent heading or navigation elements.

import Breadcrumb from '@pluralsight/ps-design-system-breadcrumb'
import React from 'react'
function Example() {
return <Breadcrumb>All the things</Breadcrumb>
}
export default Example

Guidelines

Reference the destination screen or page directly. Don't add text like "Back to..."

Do
Don't

Breadcrumbs should be written in sentence case, except for proper nouns or product titles.

Do
Don't

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests
Manual audit

WAI-ARIA Patterns: Link

Props

Name
Type
Description
Default
childrenReact.ReactNodetextual label
disabledbooleanstandard input disable flagfalse
hrefstringtarget url; renders anchor
loadingbooleanshows loading animation
onClickEvent => voidclick handler