Skip link

v3.0.0

Skip links are internal page links that aid navigation around a page. They are detected by screen readers and help users quickly jump to and over content on the page.

Released

History
View changes
Install
npm i @gold.au/skip-link
Tags
Requires
Contributors
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Hannah J. Nicdao avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Trevor Brennan avatar picture
  • Petra Gulicher avatar picture
  • Gary Broadbent avatar picture

React Usage

import AUskipLink from '@gold.au/skip-link';

<AUskipLink links={[
  {
    link: '#nav',
    text: 'Skip to navigation',
  },
  {
    link: '#content',
    text: 'Skip to content',
  },
]} />
<nav id="nav" tabindex="-1" aria-label="skip links navigation">
  <ul>
    <li><a href="#">Some navigation</a></li>
  </ul>
</nav>
<div id="content" tabindex="-1">
  Some content here
</div>

Props

Prop name Type Description
ariaLabel string The aria-label attribute, defaults to "side navigation"
links array All links inside an array, format: [{ url: '', text: '' },{…},{…}]
links[0].link string The href link of this link
items[0].text string The text of the link
items[0].onClick function A function to execute when the link is clicked

All other props are spread into the component

Exports

Name Type Description
AUskipLink default The skip link component

node_modules import

import AUskipLink from '@gold.au/skip-link';

pancake import

import AUskipLink from './skip-link';

Related components

Feedback