Breadcrumb

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

• Source
• Changelog
• Bundle size
• Figma

• 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

Click to expand

Guidelines

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

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

Accessibility

WCAG 2.1 AA Compliance

WAI-ARIA Patterns: Link

Props