Breadcrumbs
v4.0.0Breadcrumbs 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
React Usage
import AUbreadcrumbs from '@gold.au/breadcrumbs';
<AUbreadcrumbs label="Breadcrumb for this page" items={[
{
link: 'breadcrumb/one/',
text: 'breadcrumb 1',
},
{
link: 'breadcrumb/two/',
text: 'breadcrumb 2',
},
{
text: 'breadcrumb 3',
},
]} />Props
| Prop name | Type | Description |
|---|---|---|
| label | string | Provide the aria label |
| items | object | The link, text and props for each of the breadcrumbs |
| linkComponent | string | The component used for the child links, optional |
| items[0].link | string | The link of the breadcrumb, optional |
| items[0].linkComponent | string | The component used for the link, optional |
| items[0].text | string | The text of the breadcrumb |
| items[0].li | object | An object that will be spread onto the <li> tag, optional |
| dark | boolean | A dark variation of the component |
All other props are spread into the component
Exports
| Name | Type | Description |
|---|---|---|
AUbreadcrumbs |
default | The breadcrumbs component |
node_modules import
import AUbreadcrumbs from '@gold.au/breadcrumbs';pancake import
import AUbreadcrumbs from './breadcrumbs';