React Mega Menu Demo
A React library 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
- Styled (lightly) with Emotion
- The project supports theme customization with vanilla CSS, as demonstrated in the synthwave.css theme.
- Supports and tested against 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
Semantically designed structure
The menu is designed to be as semantically correct as possible. The top-level menu items are nav elements, and the submenus are ul elements. The menu items are li elements, and the links are a elements. The menu is accessible through keyboard navigation and screen readers.
Styling the menu
This menu component is designed to be highly customizable. You can apply your own CSS styles to the menu by targeting the appropriate classes. The menu structure is built using semantic HTML elements, which makes it easy to style using CSS.
The top-level menu items are wrapped in nav elements, and the submenus are wrapped in ul elements. Each menu item is an li element, and the links are a elements. This structure allows you to use standard CSS selectors to apply styles to different parts of the menu.
Additionally, the menu supports themes, which are applied by adding a theme-specific class to the menu container. You can create your own themes by defining CSS classes that follow the naming convention .rmm__theme--your-theme-name and applying them to the menu container.
Try out a theme:
Note how changing the theme only affects the mega menu and not the rest of the page/application.
Showcase your theme
Submit a pull request to add your theme to the demo!