Breadcrumbs

v4.0.0

Breadcrumbs are a navigational aid that display a user's location on a website as a row of links, usually located at the top of the page.

Released

History
View changes
Install
npm i @gold.au/breadcrumbs
Tags
Requires
Contributors
  • Trevor Brennan avatar picture
  • Hannah J. Nicdao avatar picture
  • Alexander Sadleir avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Petra Gulicher avatar picture
  • Julian Fleetwood avatar picture
  • Dominik Wilkowski avatar picture
  • Simon Pascal Klein avatar picture
  • Gary Broadbent avatar picture

Default

Breadcrumbs show users where they are in the website hierarchy and how to navigate back/up to previous levels or content.

Example

<!--
  Light:  <nav class="au-breadcrumbs" aria-label="breadcrumb">
  Dark:   <nav class="au-breadcrumbs au-breadcrumbs--dark" aria-label="breadcrumb">
-->

<nav class="au-breadcrumbs" aria-label="breadcrumb">
  <ul class="au-link-list au-link-list--inline">
    <li><a href="#">Home</a></li>
    <li><a href="#">Parent</a></li>
    <li>Current page</li>
  </ul>
</nav>

/*
  Light:  <AUbreadcrumbs>
  Dark:   <AUbreadcrumbs dark>
*/

import AUbreadcrumbs from '@gold.au/breadcrumbs';

<AUbreadcrumbs label="Breadcrumb for this page"
  items={[
    {
      link: '#',
      text: 'Home',
    },
    {
      link: '#',
      text: 'Parent',
    },
    {
      text: 'Current page',
    },
  ]}
/>

Related components

Feedback