accessible-menu/README.md

A JavaScript library to help you generate WCAG accessible menus in the DOM.

# accessible-menu

[![Latest release](https://img.shields.io/npm/v/accessible-menu?label=RELEASE&style=for-the-badge)](https://www.npmjs.com/package/accessible-menu)
[![License](https://img.shields.io/github/license/NickDJM/accessible-menu?style=for-the-badge)](/LICENSE)
[![Tests](https://img.shields.io/github/actions/workflow/status/nickdjm/accessible-menu/test.yml?branch=4.x&label=Tests&style=for-the-badge)](https://github.com/NickDJM/accessible-menu/actions/workflows/test.yml)
[![GitHub CodeQL](https://img.shields.io/github/actions/workflow/status/nickdjm/accessible-menu/codeql-analysis.yml?branch=4.x&label=CodeQL&style=for-the-badge)](https://github.com/NickDJM/accessible-menu/actions/workflows/codeql-analysis.yml)

A JavaScript library to help you effortlessly create WCAG-compliant menus in the DOM.

The supported menu types are:

- [Disclosure Navigation Menus](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/),
- [Disclosure Navigation Menus with Top-Level Links](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/),
- [Navigation Menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/), and
- [Navigation Treeview](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)

## Getting Started

Please follow the [documentation](https://accessible-menu.dev/).

## Examples

The following codepens are available as examples of how to use `accessible-menu`:

- [Disclosure Navigation Menu](https://codepen.io/nickdjm/pen/NWmWMea)
- [Disclosure Navigation Menu with Top-Level Links](https://codepen.io/nickdjm/pen/xxJNzVR)
- [Navigation Menubar](https://codepen.io/nickdjm/pen/wvZvXvP)
- [Navigation Treeview](https://codepen.io/nickdjm/pen/KKYKewB)

## Sponsors

<p align="center">
  <a href="https://coldfrontlabs.ca">
    <img src="https://coldfrontlabs.ca/themes/custom/frosty/images/coldfrontlabs-flakkon-logo.png" alt="Coldfront Labs Inc." width="300px"/>
  </a>
</p>

## Versioning

This project uses Semantic Versioning 2.0.0 to keep track of releases.

For more detailed information about SemVer, please see the [official documentation](https://semver.org/).

## Contributing

If you're interested in contributing to the project, please read the [Contribution Guidelines](.github/CONTRIBUTING.md). Any and all contributions _must_ follow these guidelines or they will not be accepted.