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

Basic Usage

Basic Usage (Mobile View)

Basic Usage (Inverse Pallete)

With active label

With custom spacer

Theme Variables (SCSS)#

// Breadcrumbs
$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,
    url: string,

    an array of objects with the properties label and url as strings.

  • activeLabel string

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

  • ariaLabel string

    label of the element

  • 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.

  • isMobile bool

    The Breadcrumbs mobile variant view.