Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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-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,
    }    []     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.

  • ariaLabel string

    label of the element

    Default'breadcrumb'
  • 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

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)