Link list
v4.0.0The link list style is a simple list of vertical or horizontal links used for site navigation. It is used to order information for users.
Released
- History
- View changes
- Install
- npm i @gold.au/link-list
- Tags
- Requires
- Contributors
React Usage
import AUlinkList from '@gold.au/link-list';
<AUlinkList items={[
{
link: 'link/one/',
text: 'Link 1',
},
{
link: 'link/two/',
text: 'Link 2',
className: 'is-active',
li: {
className: 'li-wrapping-class',
},
},
{
text: 'Link 3',
onClick: () => console.log('You clicked me!'),
},
]} />Props
| Prop name | Type | Description |
|---|---|---|
| inline | boolean | The inline option to make the list inline |
| 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 link |
| items[0].li | object | An object that will be spread onto the <li> tag, optional |
| items[0].onClick | function | A function to execute when this link is clicked |
| dark | boolean | A dark variation of the component |
All other props are spread into the component
Exports
| Name | Type | Description |
|---|---|---|
AUlinkList |
default | The link list component |
node_modules import
import AUlinkList from '@gold.au/link-list';pancake import
import AUlinkList from './link-list';