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,[]Requiredan array of objects with the properties
labelandurlas strings.activeLabel
stringallows to add a label that is not a link to the end of the breadcrumb. Defaults to
undefined.spacer
elementallows to add a custom element between the breadcrumb items. Defaults to
>rendered using theIconcomponent.clickHandler
funcallows 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.variant
enum'light' | 'dark'Default'light'The
Breadcrumbsstyle variant to use.isMobile
boolDefaultfalseThe
Breadcrumbsmobile variant view.