node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

@gov.au/breadcrumbs

@gov.au/breadcrumbs

Breadcrumbs help users understand where they are in the service and how they got there.

Contents


Install

yarn add @gov.au/breadcrumbs
npm install @gov.au/breadcrumbs --save-dev

⬆ back to top


Usage

⬆ back to top


React

Usage:

import Breadcrumbs from './breadcrumbs.js';
 
<Breadcrumbs label="Breadcrumb for this page" items={[
    {
        link: 'breadcrumb/one/',
        text: 'breadcrumb 1',
    },
    {
        link: 'breadcrumb/two/',
        text: 'breadcrumb 2',
    },
    {
        text: 'breadcrumb 3',
    },
]} />

All props:

<Breadcrumbs
    label="The aria-label"        {/* Provide the aria label is a must */}
    inverted={ false }            {/* An option to theme the breadcrumbs inverted, optional */}
    items={[                      {/* An array of all breadcrumbs */}
        {
            link: 'breadcrumb/one/',  {/* The link of the breadcrumb, optional */}
            text: 'breadcrumb 1',     {/* The text of the breadcrumb */}
        },
    ]},
/>

For more details have a look at the usage example.

⬆ back to top


Dependency graph

breadcrumbs
├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

⬆ back to top


Build

⬆ back to top


Tests

The visual test: http://uikit.apps.staging.digital.gov.au/packages/breadcrumbs/tests/site/

⬆ back to top


Release History

  • v0.3.1 - Fixed interdependency with link-list
  • v0.3.0 - Fixed react pipeline, background repeat
  • v0.2.0 - Added react component
  • v0.1.0 - 💥 Initial version

⬆ back to top


License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};