A responsive accessible menu with screen reader and keyboard support built in TailwindCSS & Alpine.js
See example at https://design-innovations.github.io/a11y-menu
Built from the ground up to be fully accessible for keyboard use and screen readers. Use the tab key or arrow keys to navigate the menu.
On small screens the menu automatically changes to a hamburger menu with click/touch support.
Most tailwind styles are in an external css file since there are so many repeating styles in a menu. Styles have been separated from functionality to make styling a breeze!
Supports separators (non-link text) and menu item subtext (smaller text under menu item). Hover support is also built in. Just uncomment the CSS for hover dropdown support.
Once you tab into a submenu it will cycle through that menu until the escape key is pressed.
All animations have been moved into the styling section of the CSS to easily modify as needed.
The menu has been tested on the latest versions of Chrome, Safari, and Thunderbird on Mac. Further testing will be done soon and modified as needed. If javascript is off the hover function works by default.
Some parts of the menu are created using common sense instead of supporting every possible variation. For example, the small screen doesn't work correctly with javascript turned off. I don't see people turning javascript off on their phones or tablets so there is no reason to add the extra bloat to support it.
I currently am using JoomlaTools Mason to compile. You can read more about it and read installation instructions here.
- Better theming support
- Add various types of menus
- Create CMS modules
- More compiling options
- SASS version for those not wanting to use Tailwind
- More to come