Side nav
v6.0.0A vertical list of links for site navigation typically placed next to the body content.
Released
- History
- View changes
- Install
- npm i @gold.au/side-nav
- Tags
- Requires
- Contributors
SCSS variables
React Usage
import AUsideNav from './side-nav.js';
<AUsideNav
dark
alt
linkComponent={ Link }
accordionHeader="In this section"
menuHeaderLink="#"
menuHeader="Lodging your tax return"
items={[
{
link: 'one',
text: 'Change to route one',
children: [
{
link: 'two',
text: 'Change to route two',
},
{
link: 'three',
text: 'Change to route three',
},
],
},
{
link: 'four',
text: 'Change to route four',
},
]}
/>Props
| Prop name | Type | Description |
|---|---|---|
| menuHeader | string | The headline of the menu |
| menuHeaderLink | string | The menu headers link |
| accordionHeader | string | The headline of the accordion |
| linkComponent | string | The component used for the child links, optional |
| ariaLabel | string | The aria-label attribute, defaults to "side navigation" |
| closed | boolean | Closed state, optional |
| speed | number | Speed of the animation in ms, optional |
| onOpen | function | A function executed when the accordion opens, optional |
| afterOpen | function | A function executed after the accordion opens, optional |
| onClose | function | A function executed when the accordion closes, optional |
| afterClose | function | A function executed after the accordion closes, optional |
| dark | boolean | A dark variation of the component |
| alt | boolean | An alternate variation of the component |
| items | object | The menu items |
| items[0].text | string | The text of the link |
| items[0].link | string | The location of the link |
| items[0].children | object | An array of items containing child links, text and children |
All other props are spread into the component
Exports
| Name | Type | Description |
|---|---|---|
AUsideNav |
default | The link list component |
node_modules import
import AUsideNav from '@gold.au/side-nav';pancake import
import AUsideNav from './side-nav';