React Mega Menu
A React project which aims to be an accessible, responsive, boilerplate top navigation menu with a "Mega Menu"!
Features
- WCAG 2.1 AA compliant
- W3C valid markup
- Fly-out menus
- Menus are accessible through key inputs
- Unified menu for all screen ratios
- Styled with SASS modules
- Supports and tested against IE 11, Edge, Safari, FireFox, Chrome
- CSS animations with prefers-reduced-motion media query prefers-reduced-motion
View demo
Visit: https://react-mega-menu-demo.vercel.app
Deploy
Vercel
Special Thanks
Donna Vitan for the accessibility consultation
Resources
Web Accessibility Tutorials (WCAG) Menu Structure
Web Accessibility Tutorials (WCAG) Fly-out Menus
JavaScript Event KeyCodes by Wes Bos
Supporting the keyboard for mobile
Accessible Menus
"Building Accessible Menu Systems" by Heydon Pickering
Using the aria-hidden attribute
Reduced Motion Support
Learn by reading these:
-
"Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective"
-
W3C: Understanding Success Criterion 2.3.3: Animation from Interactions
How to test prefers-reduced-motion on Mac OS
- Open settings for Accessibility
- Toggle Reduce motion On/Off
How to test prefers-reduced-motion on iOS
- Open settings for Accessibility
- Toggle Reduce motion On/Off
How to test prefers-reduced-motion on Windows 10
- Press Windows key
- Search Show animations in Windows
- Toggle option On/Off
How to test prefers-reduced-motion on Android
- Search in your system Settings for Remove animations and toggle On/Off, or
- Go to your systems settings > Accessibility and look for a toggle to reduce motion or turn off animations
- If you have a browser app already open, you'll have to force quit it to have the setting take effect
Icons
Icons from the Free for Web download pack by Font Awesome