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
• Supports keyboard navigation and screen readers
• Responsively designed to adapt to modern mobile and desktop screen sizes
• Lightly styled with Emotion
• Supports theme customization with vanilla CSS, as demonstrated in the synthwave.css theme
• Tested and supported on Edge, Safari, Firefox, and Chrome
• Includes CSS animations that respect the prefers-reduced-motion media query for users who prefer reduced motion
• Includes a demo project using Next.js, showcasing how to integrate the menu with a Next.js application

FAQ

• What is a "Mega Menu"? A Mega Menu is a large dropdown navigation menu that displays multiple links and categories at once. It often organizes content into columns or sections, allowing users to see a broader range of options at a glance. It is typically used for websites with a lot of content or categories, like e-commerce or large informational sites.
• Why would someone use a Mega Menu? Mega menus are important for building an online e-commerce presence because they enhance navigation by allowing users to quickly browse and access a wide range of products or categories. They help improve the user experience by organizing complex inventories into clear, accessible sections, reducing the time it takes for customers to find what they're looking for, which can lead to higher engagement and conversion rates.
• Can I use this just for a simple website menu? Yes! This project is designed to be flexible and can be used for any type of website navigation. You can customize the menu to fit your needs, whether you want a simple dropdown menu or a more complex Mega Menu.

View Demo

Visit: https://jasonrundell-react-mega-menu.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 macOS

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 the Win+R keys to open Run, type SystemPropertiesPerformance.exe into Run, and click/tap on OK to directly open to the Visual Effects tab in Performance Options.
2. Check (enable - default) or uncheck (disable) Animate controls and elements inside windows.
3. If you don't see an immediate change, then you can restart the explorer process or sign out and sign in to apply instead.

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 system 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