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>