@gov.au/inpage-nav
Use inpage-nav links to help users scan and jump to content of a page.
Contents
Install
yarn add @gov.au/inpage-nav
npm install @gov.au/inpage-nav
Usage
React
Usage:
import AUinpageNavLinks AUinpageNavSection from './inpage-nav.js'; <AUinpageNavLinks = /> <AUinpageNavSection ="Section 1 headline" ="section1"></AUinpageNavSection> <AUinpageNavSection ="Section 2 headline" ="section2"></AUinpageNavSection>
All props:
<AUinpageNavLinks ="Contents" ="in page navigation" =/> <AUinpageNavSection ="Section 1" ="section1" ="2" ="au-display-lg" ="Link to section" = />
(💡 additional props are spread onto the component)
For more details have a look at the usage example.
Dependency graph
inpage-nav├─ core└─ link-list ├─ core └─ body └─ core
Tests
The visual test: https://auds.service.gov.au/packages/inpage-nav/tests/site/
Release History
- v3.0.6 - Remove --save-dev flag from readme instructions
- v3.0.5 - Removed unused
Fragment
React import - v3.0.4 - Removed uikit references
- v3.0.3 - Added an aria-label attribute to the nav element
- v3.0.2 - Update dependencies
- v3.0.1 - Removing web pack dev server, updating dependencies
- v3.0.0 - Updated dependency version of link-list, build scripts for Windows
- v2.0.5 - Replace node-sass with sass
- v2.0.4 - Change npm run watch browser-sync location
- v2.0.3 - Update dependencies
- v2.0.2 - Change homepage links
- v2.0.1 - Fix dependencies
- v2.0.0 - Change to focus colour and border/muted color mix
- v1.0.0 - Moved to AU namespace, added new color themes and spacing
- v0.3.0 - Added pancake-react plugin, ES5 main file
- v0.2.0 - Added react component
- v0.1.1 - Fixed a11y contrast issue
- v0.1.0 - 💥 Initial version
License
Copyright (c) Commonwealth of Australia. Licensed under MIT.