@ausbom/breadcrumbs

Breadcrumbs are a type of secondary navigation. They help the user understand their location in the website and show any parent pages associated with it. Breadcrumbs are a horizontal row of text links separated by the chevron icon (>). The chevron indicates the level of that page relative to the page links beside it.

Installation

npm install @ausbom/breadcrumbs

Usage

import Breadcrumbs, { Breadcrumb } from '@ausbom/breadcrumbs'
import React from 'react'
import Home12 from '@ausbom/icon/lib/icons/system/Home12'

// Desktop version
<Breadcrumbs>
  <Breadcrumb as="a" label="Home" icon={Home12} hideLabel href="/" id="one" />
  <Breadcrumb as="a" label="Level two" href="/" id="two" />
  <Breadcrumb as="span" label="Current page" current id="three" />
</Breadcrumbs>

// Compact (mobile) version
<Breadcrumbs compact>
  <Breadcrumb useAsCompact as="a" label="Parent to this page" href="/" id="one-compact" />
</Breadcrumbs>