Inpage nav
v4.0.0Inpage nav links helps users scan the contents of a page and navigate to different sections of the page.
Released
- History
- View changes
- Install
- npm i @gold.au/inpage-nav
- Tags
- Requires
- Contributors
React Usage
import { AUinpageNavLinks, AUinpageNavSection } from '@gold.au/inpage-nav';
<AUinpageNavLinks sections={[
{
link: 'section1',
title: 'Section 1',
},
{
link: 'section2',
title: 'Section 2',
li: {
className: 'li-wrapping-class',
},
},
]} />
<AUinpageNavSection title="Section 1 headline" link="section1">
</AUinpageNavSection>
<AUinpageNavSection title="Section 2 headline" link="section2">
</AUinpageNavSection>Props
AUinpageNavLinks
| Prop name | Type | Description |
|---|---|---|
| title | string | The title above all sections |
| ariaLabel | string | The aria-label attribute, defaults to "in page navigation" |
| sections | array | All of the sections in a neat array |
| sections[ 0 ].link | string | The link to the section, this will be converted to a hash link |
| sections[ 0 ].title | string | The link text of this section |
| sections[ 0 ].li | object | An object that will be spread onto the <li> tag, optional |
| sections[ 0 ].onClick | function | A function to be executed when a section is clicked, optional |
All other props are spread into the component
AUinpageNavSection
| Prop name | Type | Description |
|---|---|---|
| title | string | The title of the section |
| link | string | The link of this section, corresponds to the link inside AUinpageNavLinks |
| level | number | The semantic heading tag level, h1-h6, optional |
| headingClass | string | Additional classes to be added to the headline, optional |
| sectionLink | string | The text for the section link |
| dark | boolean | A dark variation of the component |
All other props are spread into the component
Exports
| Name | Type | Description |
|---|---|---|
AUinpageNavLinks |
named | The AUinpageNavLinks component |
AUinpageNavSection |
named | The AUinpageNavSection component |
node_modules import
import { AUinpageNavLinks, AUinpageNavSection } from '@gold.au/inpage-nav';pancake import
import { AUinpageNavLinks, AUinpageNavSection } from './inpage-nav';