Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Breadcrumbs

Use as a secondary navigation pattern to help convey hierarchy and enable navigation.

Basic Usage

Basic Usage (Mobile View)

Basic Usage (Inverse Palette)

With custom link element

By default Breadcrumb uses a tag to render breadcrumbs, which may not always suit your needs. This behaviour can be customized with linkAs prop, the example below uses Gatsby's Link component, but it would also work with react-router's Link component as well because they share required parts of the component API.

Note that links list contains objects with different keys compared to the example above, specifically href key is replaced with to, that's because Gatsby's Link expects its destination to be set through to prop (same as react-router's Link), internally Breadcrumb passes down these objects (except label attribute) as props to the linkAs element.

With active label

With custom spacer

Theme Variables (SCSS)#

$breadcrumb-font-size:               null !default;
$breadcrumb-padding-y:               .75rem !default;
$breadcrumb-padding-x:               1rem !default;
$breadcrumb-item-padding:            .5rem !default;
$breadcrumb-margin-bottom:           1rem !default;
$breadcrumb-margin-left:            .5rem !default;
$breadcrumb-border-focus-axis-x:     .25rem !default;
$breadcrumb-border-focus-axis-y:     .5rem !default;
$breadcrumb-border-focus-width:      .0625rem !default;
$breadcrumb-bg:                      $gray-200 !default;
$breadcrumb-divider-color:           $gray-600 !default;
$breadcrumb-active-color:            $gray-500 !default;
$breadcrumb-inverse-active:          $light-500 !default;
$breadcrumb-inverse-spacer:          $light-700 !default;
$breadcrumb-color:                   $primary-500 !default;
$breadcrumb-inverse-color:           $white !default;
$breadcrumb-divider:                 "/" !default;
$breadcrumb-border-radius:           $border-radius !default;
$breadcrumb-focus-border-radius:           .125rem !default;
Breadcrumb Props API
  • links shape {
    label: string,
    }    []     Required

    An array of objects describing links to be rendered. The contents of an object depend on the value of linkAs prop as these objects will get passed down as props to the underlying component defined by linkAs prop.

  • activeLabel string

    allows to add a label that is not a link to the end of the breadcrumb.

  • ariaLabel string

    label of the element

    Default'breadcrumb'
  • spacer element

    allows to add a custom element between the breadcrumb items. Defaults to > rendered using the Icon component.

  • clickHandler func

    allows to add a custom function to be called onClick of a breadcrumb link. The use case for this is for adding custom analytics to the component.

  • variant enum'light' | 'dark'

    The Breadcrumbs style variant to use.

    Default'light'
  • isMobile bool

    The Breadcrumbs mobile variant view.

    Defaultfalse
  • linkAs elementType

    Specifies the base element to use when rendering links, you should generally use either plain 'a' or react-router's Link.

    Default'a'

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)