Sobeys Logo

MegaMenu Component

The MegaMenu component is a highly dynamic, responsive, and accessible multi-level navigation system built with React. It is designed to handle complex nested menu structures and display them in an intuitive dropdown (mega menu) layout. It supports deep menu hierarchies, same-level grouping, and custom link behaviors — all styled with clean CSS classes and controlled state management.

Recursive Menu Rendering:

  • Uses a recursive() function to convert raw headerData into a flattened or nested MenuItem structure based on isDropdown and sameLevelList flags.
  • Supports infinite nesting with children, maintaining the appropriate level tracking.

Open/Close Logic with State Isolation:

  • Maintains an openItems state object to track which menu paths are currently open.
  • Clicking on one dropdown closes others on the same level, preventing multiple menus from being open at once.

Keyboard Accessibility Support:

  • Handles Tab and Shift+Tab key events to close menus on focus exit.
  • Focusable elements are properly managed inside the dropdown.

Fully Styled with Utility Classes:

  • Uses Tailwind CSS and custom class names (menu-trigger, menu-content, menu-item, etc.) for consistent styling and animations.
  • Responsive layout and spacing, particularly with classes like navbar-expand-lg, lg:flex, etc.