Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nickdjm/accessible-menu-bootstrap-5
A JavaScript library to help you generate WAI-ARIA accessible menus with in the DOM using Bootstrap 5.
https://github.com/nickdjm/accessible-menu-bootstrap-5
accessibility aria bootstrap bootstrap-5 bootstrap5 disclosure-menu hoverable hoverable-dropdown javascript menu menubar navigation treeview wcag
Last synced: 7 days ago
JSON representation
A JavaScript library to help you generate WAI-ARIA accessible menus with in the DOM using Bootstrap 5.
- Host: GitHub
- URL: https://github.com/nickdjm/accessible-menu-bootstrap-5
- Owner: NickDJM
- License: isc
- Created: 2021-11-30T20:17:02.000Z (about 3 years ago)
- Default Branch: 2.x
- Last Pushed: 2024-10-03T12:55:37.000Z (5 months ago)
- Last Synced: 2024-10-30T05:56:59.458Z (4 months ago)
- Topics: accessibility, aria, bootstrap, bootstrap-5, bootstrap5, disclosure-menu, hoverable, hoverable-dropdown, javascript, menu, menubar, navigation, treeview, wcag
- Language: JavaScript
- Homepage:
- Size: 1.01 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# accessible-menu-bootstrap-5
[](https://www.npmjs.com/package/accessible-menu-bootstrap-5)
[](/LICENSE)
[](https://github.com/NickDJM/accessible-menu-bootstrap-5/actions/workflows/test.yml)
[](https://github.com/NickDJM/accessible-menu-bootstrap-5/actions/workflows/codeql-analysis.yml)A JavaScript library to help you generate WAI-ARIA accessible menus with in the DOM using Bootstrap 5.
This project is an extension of [accessible-menu](https://github.com/NickDJM/accessible-menu) to allow out-of-the-box for Bootstrap 5 compatibility.
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 main project's [documentation](https://accessible-menu.dev/).
### Installation
You can install Accessible Menu Bootstrap 5 into your project using NPM.
```bash
# latest stable
npm install accessible-menu-bootstrap-5
```### Using Accessible Menu from a CDN
You can use Accessible Menu Bootstrap 5 directly from a CDN via a script tag.
```html
```
We use [jsdelivr](https://www.jsdelivr.com/package/npm/accessible-menu-bootstrap-5) as the example, but you can use any cdn you prefer, such as [unpkg](https://unpkg.com). You can also download the files listed in the CDN and host them yourself if preferred.
## Examples
The following codepens are available as examples of how to use `accessible-menu-bootstrap-5`:
- [Disclosure Navigation Menu](https://codepen.io/nickdjm/pen/MWRaEoV)
- [Disclosure Navigation Menu with Top-Level Links](https://codepen.io/nickdjm/pen/XWQmezx)
- [Navigation Menubar](https://codepen.io/nickdjm/pen/YzMyraX)
- [Navigation Treeview](https://codepen.io/nickdjm/pen/zYXvEWy)## Sponsors
## 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.