Breadcrumbs

Use as a secondary navigation pattern to help convey hierarchy and enable navigation.

Basic Usage

() => {
  const isExtraSmall = useMediaQuery({maxWidth: breakpoints.extraSmall.maxWidth});

  return (
    <Breadcrumb ariaLabel="Breadcrumb basic"
      links={[
        { label: 'Link 1', url: '#link-1' },
        { label: 'Link 2', url: '#link-2' },
        { label: 'Link 3', url: '#link-3' },
      ]}
      isMobile={isExtraSmall}
    />
  )
}

() => {
  const isExtraSmall = useMediaQuery({maxWidth: breakpoints.extraSmall.maxWidth});

  return (
    <Breadcrumb ariaLabel="Breadcrumb basic"
      links={[
        { label: 'Link 1', url: '#link-1' },
        { label: 'Link 2', url: '#link-2' },
        { label: 'Link 3', url: '#link-3' },
      ]}
      isMobile={isExtraSmall}
    />
  )
}

Basic Usage (Mobile View)

<Breadcrumb ariaLabel="Breadcrumb mobile view"
  links={[
    { label: 'Link 1', url: '/link-1' },
    { label: 'Link 2', url: '/link-2' },
    { label: 'Link 3', url: '/link-3' },
  ]}
  isMobile
/>

<Breadcrumb ariaLabel="Breadcrumb mobile view"
  links={[
    { label: 'Link 1', url: '/link-1' },
    { label: 'Link 2', url: '/link-2' },
    { label: 'Link 3', url: '/link-3' },
  ]}
  isMobile
/>

Basic Usage (Inverse Pallete)

() => {
  const isExtraSmall = useMediaQuery({maxWidth: breakpoints.extraSmall.maxWidth});

  return (
    <div className="bg-dark-700 p-4">
      <Breadcrumb ariaLabel="Breadcrumb inverse pallete"
        links={[
          {label: 'Link 1', url: '/link-1'},
          {label: 'Link 2', url: '/link-2'},
          {label: 'Link 3', url: '/link-3'},
        ]}
        variant="dark"
        isMobile={isExtraSmall}
      />
    </div>
  )
}

() => {
  const isExtraSmall = useMediaQuery({maxWidth: breakpoints.extraSmall.maxWidth});

  return (
    <div className="bg-dark-700 p-4">
      <Breadcrumb ariaLabel="Breadcrumb inverse pallete"
        links={[
          {label: 'Link 1', url: '/link-1'},
          {label: 'Link 2', url: '/link-2'},
          {label: 'Link 3', url: '/link-3'},
        ]}
        variant="dark"
        isMobile={isExtraSmall}
      />
    </div>
  )
}

With active label

() => {
  const isExtraSmall = useMediaQuery({maxWidth: breakpoints.extraSmall.maxWidth});

  return (
    <Breadcrumb ariaLabel="Breadcrumb is active"
      links={[
        { label: 'Link 1', url: '#link-1' },
        { label: 'Link 2', url: '#link-2' },
        { label: 'Link 3', url: '#link-3' },
      ]}
      activeLabel="Link 4"
      isMobile={isExtraSmall}
    />
  )
}

() => {
  const isExtraSmall = useMediaQuery({maxWidth: breakpoints.extraSmall.maxWidth});

  return (
    <Breadcrumb ariaLabel="Breadcrumb is active"
      links={[
        { label: 'Link 1', url: '#link-1' },
        { label: 'Link 2', url: '#link-2' },
        { label: 'Link 3', url: '#link-3' },
      ]}
      activeLabel="Link 4"
      isMobile={isExtraSmall}
    />
  )
}

With custom spacer

() => {
  const isExtraSmall = useMediaQuery({maxWidth: breakpoints.extraSmall.maxWidth});

  return (
    <Breadcrumb ariaLabel="Breadcrumb custom spacer"
      links={[
        { label: 'Link 1', url: '#link-1' },
        { label: 'Link 2', url: '#link-2' },
        { label: 'Link 3', url: '#link-3' },
      ]}
      spacer={<span className="custom-spacer">/</span>}
      isMobile={isExtraSmall}
    />
  )
}

() => {
  const isExtraSmall = useMediaQuery({maxWidth: breakpoints.extraSmall.maxWidth});

  return (
    <Breadcrumb ariaLabel="Breadcrumb custom spacer"
      links={[
        { label: 'Link 1', url: '#link-1' },
        { label: 'Link 2', url: '#link-2' },
        { label: 'Link 3', url: '#link-3' },
      ]}
      spacer={<span className="custom-spacer">/</span>}
      isMobile={isExtraSmall}
    />
  )
}

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;

Paragon Design System

Breadcrumbs

Basic Usage

Basic Usage (Mobile View)

Basic Usage (Inverse Pallete)

With active label

With custom spacer

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Breadcrumbs

Basic Usage#

Basic Usage (Mobile View)#

Basic Usage (Inverse Pallete)#

With active label#

With custom spacer#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

Basic Usage (Mobile View)

Basic Usage (Inverse Pallete)

With active label

With custom spacer