Main nav
v2.0.0A horizontal list of links to key areas on the website. Typically placed in the header.
Released
- History
- View changes
- Install
- npm i @gold.au/main-nav
- Tags
- Requires
- Contributors
SCSS variables
React Usage
import AUmainNav, { AUmainNavContent } from './main-nav.js';
<AUmainNav>
<div className="container">
<div className="row">
<div className="col-md-12">
<AUmainNavContent items={[
{
link: '#',
text: 'About',
},
{
link: '#',
text: 'Get started',
},
{
link: '#',
text: 'Components',
active: true
},
{
link: '#',
text: 'Templates',
},
]} />
</div>
</div>
</div>
</AUmainNav>Props
AUmainNav
| Prop name | Type | Description |
|---|---|---|
| alt | boolean | An alternate variation of the component |
| dark | boolean | A dark variation of the component |
| ariaLabel | string | The aria-label attribute, defaults to "main" |
All other props are spread into the component
AUmainNavContent
| Prop name | Type | Description |
|---|---|---|
| linkComponent | string | The component used for the child links, 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 |
| 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].active | boolean | If the menu item is active |
All other props are spread into the component
Exports
| Name | Type | Description |
|---|---|---|
AUmainNav |
default | The main nav component |
AUmainNavContent |
named | The main nav content component |
node_modules import
import AUmainNav, { AUmainNavContent } from '@gold.au/main-nav';pancake import
import AUmainNav, { AUmainNavContent } from './main-nav';