Link list

v4.0.0

The 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
  • Tengis Batsaikhan avatar picture
  • Trevor Brennan avatar picture
  • Alex Page avatar picture
  • Dominik Wilkowski avatar picture
  • Petra Gulicher avatar picture
  • Gary Broadbent avatar picture
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Hannah J. Nicdao avatar picture
  • Patrick De Young avatar picture

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';