https://github.com/timwright12/barebones-a11y-skipper

A skip menu generation plugin inspired by the robust LinkedIn skip menu
https://github.com/timwright12/barebones-a11y-skipper

Last synced: 10 months ago
JSON representation

A skip menu generation plugin inspired by the robust LinkedIn skip menu

• Host: GitHub
• URL: https://github.com/timwright12/barebones-a11y-skipper
• Owner: timwright12
• License: mit
• Created: 2019-05-09T14:36:27.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2023-11-05T14:02:25.000Z (over 2 years ago)
• Last Synced: 2025-08-30T10:25:07.403Z (10 months ago)
• Language: JavaScript
• Size: 2.08 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# A11y Skipper Menu

![Confirm Successful Build](https://github.com/timwright12/barebones-a11y-skipper/workflows/Confirm%20Successful%20Build/badge.svg) [![Support Level](https://img.shields.io/badge/support-active-green.svg)](#support-level) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 

## 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

```bash

npm install @barebones/a11y-skipper --save

```

### JavaScript

```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

```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

```html



	

	skip to content



Your search stuff here.


Your main content here.

```