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
label
andurl
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 theIcon
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'Default'light'The
Breadcrumbs
style variant to use.isMobile
bool
DefaultfalseThe
Breadcrumbs
mobile variant view.