@barebones/a11y-skipper

A11y Skipper Menu

Usage

If any ID passed into the Skipper.init() object are not present on the current page they will not show up in the menu.

Installation

npm install @barebones/a11y-skipper --save

JavaScript

import '@barebones/a11y-skipper';

Barebones.skipper.init( {
	targetElement: '#a11y-catcher',
	primary: ['Skip to content', '#main'],
	secondary: ['Skip to search', '#search'],
	menu: [
		{ label: 'Navigation', id: '#nav' },
		{ label: 'Sidebar', id: '#sidebar' },
		{ label: 'Footer', id: '#footer' }
	],
	open: false
} );

CSS

@import url("@barebones/a11y-skipper");

/* Update the color variables if you want */
:root {
  --c-a11y-skipper-branding: black;
  --c-a11y-skipper-branding-inverse: white;
}

/* Add more CSS here if you need to override anything */

HTML

<!--Matches the ID passed into Skipper.init()-->
<div id="a11y-catcher">
	<!--A no-JS fallback skip link-->
	<a href="#main">skip to content</a>
</div>

<!--Matches the secondary string ID passed into Skipper.init()-->
<div id="search">Your search stuff here.</div>

<!--Matches the primary string ID passed into Skipper.init()-->
<div id="main">Your main content here.</div>