@jasonrundell/react-mega-menu v1.7.3

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

a11y Project: Resources

Accessible Menus

Deque University

"Building Accessible Menu Systems" by Heydon Pickering

Using the aria-hidden attribute

Reduced Motion Support

Learn by reading these:

• "Your Interactive Makes Me Sick"

• "Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective"

• "An Introduction to the Reduced Motion Media Query"

• "prefers-reduced-motion: Sometimes less movement is more"

• W3C: Understanding Success Criterion 2.3.3: Animation from Interactions

• MDN Reference

How to test prefers-reduced-motion on Mac OS

1. Open settings for Accessibility
2. Toggle Reduce motion On/Off

How to test prefers-reduced-motion on iOS

1. Open settings for Accessibility
2. Toggle Reduce motion On/Off

How to test prefers-reduced-motion on Windows 10

1. Press Windows key
2. Search Show animations in Windows
3. Toggle option On/Off

How to test prefers-reduced-motion on Android

1. Search in your system Settings for Remove animations and toggle On/Off, or
2. Go to your systems settings > Accessibility and look for a toggle to reduce motion or turn off animations
3. 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