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: "/" !default;$breadcrumb-border-radius: $border-radius !default;
Breadcrumb Props API
- linksshape{label:string,url:}string,[]Requiredan array of objects with the properties labelandurlas strings.
- activeLabelstringallows to add a label that is not a link to the end of the breadcrumb. Defaults to undefined.
- ariaLabelstringDefault'breadcrumb'label of the element 
- spacerelementallows to add a custom element between the breadcrumb items. Defaults to >rendered using theIconcomponent.
- clickHandlerfuncallows to add a custom function to be called onClickof a breadcrumb link. The use case for this is for adding custom analytics to the component.
- variantenum'light' | 'dark'Default'light'The Breadcrumbsstyle variant to use.
- isMobileboolDefaultfalseThe Breadcrumbsmobile variant view.