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.
npm install @ausbom/breadcrumbsimport 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>