Paragon Design System

Theme

Navigation
npm_versionnpm Paragon package page

Breadcrumbs

Edit this pagein a new tabLeave feedbackin a new tab

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

Basic Usage

Any Paragon component or export may be added to the code example.

Basic Usage (Mobile View)

Any Paragon component or export may be added to the code example.

Basic Usage (Inverse Palette)

Any Paragon component or export may be added to the code example.

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.

Any Paragon component or export may be added to the code example.

With active label

Any Paragon component or export may be added to the code example.

With custom spacer

Any Paragon component or export may be added to the code example.

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;

Props API#

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'

Usage Insights#

Breadcrumb

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.13
frontend-app-course-authoring22.8.13
frontend-app-learner-portal-enterprise21.13.14
frontend-app-library-authoring21.11.32
frontend-app-support-tools21.13.11
prospectus20.46.24
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)