PHPackages                             ucomm/a11y-menu - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ucomm/a11y-menu

ActiveLibrary[Utility & Helpers](/categories/utility)

ucomm/a11y-menu
===============

A package to generate accessible main navigation menus. It includes: a js script for the browser as an npm package, WordPress walker for theme development, and WordPress plugin.

v1.0.2(5y ago)252.0k2[2 issues](https://github.com/aberkow/a11y-menu/issues)[20 PRs](https://github.com/aberkow/a11y-menu/pulls)MITJavaScript

Since Jul 16Pushed 3y ago4 watchersCompare

[ Source](https://github.com/aberkow/a11y-menu)[ Packagist](https://packagist.org/packages/ucomm/a11y-menu)[ RSS](/packages/ucomm-a11y-menu/feed)WikiDiscussions master Synced 3w ago

READMEChangelogDependencies (4)Versions (42)Used By (0)

a11y Menu
=========

[](#a11y-menu)

This project aims to create a re-useable and accessible main navigation module. There are a few goals...

- Be able to include this package as a standalone or in a WordPress plugin/theme
- Allow for quick implementation of accessible menus
- Menus should allow for developer customization particularly with respect to style
- Menu functionality should take into account different modes of user input (e.g. mouse, keyboard)

Usage
-----

[](#usage)

### Installing via NPM

[](#installing-via-npm)

This package can be installed via npm using `npm install a11y-menu`. This will provide access to the JS and sass files, but *not* the WordPress menu walker. The intention is to give javascript developers access to the JS menu walker, navigation script, and styles in a way that can be used with webpack or other bundlers.

### Creating a menu via JS

[](#creating-a-menu-via-js)

There are two functions and one stylesheet that can be used together to create an accessible menu.

- `displayMenu`
- `Navigation`
- main.scss

`displayMenu()` takes a json file (see /mock-data below for the format). It can be imported and used as follows

```
import { displayMenu } from 'a11y-menu';
// testData is an arbitrary json file.
import { menu } from './test-data.json';
const mainMenu = document.getElementById('main-menu');

displayMenu(mainMenu, menu);
```

This can be combined with the `Navigation` class to create a working menu with submenus that display on either click or hover events.

```
// clickable menu
import Navigation, { displayMenu } from 'a11y-menu';
// testData is an arbitrary json file.
import { menu } from './test-data.json';
const mainMenu = document.getElementById('main-menu');

mainMenu.classList.add('am-click-menu');

displayMenu(mainMenu, menu);

const navigation = new Navigation({ click: true });

document.addEventListener('DOMContentLoaded', () => {
    navigation.init();
});
```

```
// hoverable menu
import Navigation, { displayMenu } from 'a11y-menu';
// testData is an arbitrary json file.
import { menu } from './test-data.json';

const mainMenu = document.getElementById('main-menu');

// if needed
mainMenu.classList.remove('am-click-menu');

displayMenu(mainMenu, menu);

const navigation = new Navigation();

document.addEventListener('DOMContentLoaded', () => {
    navigation.init();
});
```

`main.scss` can be required using webpack or similar. Another option is to include in your project the transpiled css file that can be found at `dist/main.css`.

### Installing via Composer.

[](#installing-via-composer)

This package can be installed as a dependency via [Composer](https://getcomposer.org/). To check if you have Composer installed, run the `composer` command in the terminal. If Composer's not available, install it. Then within your project run `composer require ucomm/a11y-menu`.

### Creating a menu with PHP

[](#creating-a-menu-with-php)

For non-WordPress PHP projects, you can use the [`aberkow/a11y-menu-php` composer package](https://github.com/aberkow/a11y-menu-php). The package takes the place of the javascript `displayMenu` function for PHP projects. It can be installed with `composer require aberkow/a11y-menu-php` and exposes a single static method which can be used like this:

```