Breadcrumbs

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-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: quote("/") !default;
$breadcrumb-border-radius: $border-radius !default;
Breadcrumb Props API
  • links
    shape {
    label: string,
    url: string,
    }
    []
    Required

    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.

  • 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