Fully Accessible
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.
Mobile Support
On small screens the menu automatically changes to a hamburger menu with click/touch support.
Easy Styling
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!
Flexible Usage
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.
Focus Trapping
Once you tab into a submenu it will cycle through that menu until the escape key is pressed.
Flexible Animations
All animations have been moved into the styling section of the CSS to easily modify as needed.
Compatibility
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.
Additional Notes
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.