@ausbom/breadcrumbs

Breadcrumbs are a type of secondary navigation that reveals the user's location in the website as well as any parent pages associated with it. Breadcrumbs are horizontally arranged text links separated by the Chevron icon (>). The chevron indicates the level of that page relative to the page links beside it.

Usage no npm install needed!

<script type="module">
  import ausbomBreadcrumbs from 'https://cdn.skypack.dev/@ausbom/breadcrumbs';
</script>

README

@ausbom/breadcrumbs

Breadcrumbs are a type of secondary navigation that reveals the user's location in the website as well as any parent pages associated with it. Breadcrumbs are horizontally arranged 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>