Breadcrumb

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

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

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-breadcrumb
  • Import
    import Breadcrumb from '@pluralsight/ps-design-system-breadcrumb'
Name
Type
Description
Default
childrenReact.ReactNodetextual label
disabledbooleanstandard input disable flagfalse
hrefstringtarget url; renders anchor
loadingbooleanshows loading animation
onClickEvent => voidclick handler