Mega Menu
Overview:
The Mega Menu is used to create an expanded navigation dropdown for the Header. It supports multiple menu levels, a dedicated banner image, responsive desktop/mobile layouts, nested navigation, configurable menu typography, color schemes, animations, keyboard navigation, and dropdown open/close behavior.
The Mega Menu is configured through the Mega Menu block and is associated with a selected menu item position.
How to Add a Mega Menu
The Mega Menu is added through the Header section using the Mega Menu block.
Step 1 — Create Your Navigation Menu
First, create the menu structure you want to display inside the Mega Menu.
Go to:
Shopify Admin → Content → Menus → Main Menu
Blocks Configuration
Mega Menu Block:
The Mega Menu block converts a selected Header menu item into an expanded mega navigation menu.
Content
| Setting | Description |
|---|---|
| Menu Item Position | Defines the position of the Header menu item where the Mega Menu is applied. |
| Menu | Selects the navigation menu used within the Mega Menu. |
| Banner Image | Allows adding a promotional/banner image to the Mega Menu. |
The selected menu determines the navigation structure displayed inside the Mega Menu.
Mega Menu Structure
The Mega Menu is divided into three main columns on desktop:
| Column | Description |
|---|---|
| Column One | Displays the selected block menu's top-level links and their nested child links. |
| Column Two | Displays the configured Mega Menu banner image. |
| Column Three | Displays the parent Header menu item's child links and their nested grandchild links. |
Desktop Column Distribution:
| Column | Width |
|---|---|
| Column One | 20% |
| Column Two | 33.33% |
| Column Three | 46.67% |
The columns are displayed horizontally on desktop devices and vertically on smaller screens.
Navigation Settings
Menu Links:
The Mega Menu supports multiple levels of navigation.
Level 1:
The primary Header menu item opens the Mega Menu when the dropdown toggle is activated.
| Setting | Description |
|---|---|
| Menu Item | Displays the selected Header navigation item. |
| Dropdown Toggle | Opens and closes the Mega Menu. |
| Active State | Highlights the current menu item when its URL matches the current page. |
Level 2 Navigation:
Level 2 navigation is displayed when a menu item contains child links.
| Setting | Description |
|---|---|
| Parent Menu Link | Displays the parent navigation item. |
| Child Menu Links | Displays links belonging to the selected parent menu item. |
| Nested Dropdown | Opens additional child navigation when available. |
Level 3 Navigation:
The Mega Menu supports an additional navigation level for menu items containing nested links.
| Setting | Description |
|---|---|
| Child Menu Link | Displays the selected child navigation item. |
| Grandchild Links | Displays the final-level navigation links under the child item. |
| Nested Navigation | Allows users to access deeper navigation levels. |
On desktop, the third-column nested items are displayed directly without an additional dropdown toggle.
Banner Image:
The banner image is displayed in the middle column of the Mega Menu.
| Setting | Description |
|---|---|
| Banner Image | Allows adding an image to visually support the Mega Menu navigation. |
| Image Display | The image fills the available banner area using a cover-style presentation. |
| Image Loading | The banner image uses lazy loading. |
| Image Alt Text | Uses the configured image alt text; if unavailable, a default alternative text is provided. |
| Placeholder Image | Displays a placeholder image when no banner image is configured. |
Desktop Banner:
The banner occupies the full height of the middle Mega Menu column.
Mobile Banner:
The banner uses a fixed height of approximately 250px.
Layout:
| Setting | Description |
|---|---|
| Desktop Layout | Displays the Mega Menu using a three-column horizontal layout. |
| Mobile Layout | Displays the Mega Menu content in a vertical/mobile navigation structure. |
| Container Layout | Uses the Header's configured container layout and maximum content size. |
| Minimum Desktop Height | The Mega Menu has a minimum desktop height of approximately 380px. |
| Column Spacing | Desktop columns use spacing between each navigation/content area. |
The desktop column gap is 15px, increasing to 30px on larger screens.
Responsive Behavior
Desktop:
The Mega Menu becomes a traditional expanded dropdown on screens 992px and above.
| Behavior | Description |
|---|---|
| Dropdown Position | Opens below the Header menu item. |
| Navigation Layout | Uses three horizontal columns. |
| Banner | Occupies the middle column. |
| Nested Navigation | Displays nested navigation within the Mega Menu. |
| Dropdown Header | The mobile-style dropdown header is hidden. |
| Body Scroll | The page body is prevented from scrolling while the main Mega Menu is open. |
If the dropdown extends beyond the viewport height, the Mega Menu automatically becomes scrollable.
Mobile:
On screens below 992px, the Mega Menu changes to a mobile-friendly navigation experience.
| Behavior | Description |
|---|---|
| Full-Screen Dropdown | The Mega Menu opens as a full-screen overlay. |
| Navigation Layout | Content is displayed vertically. |
| Back Button | A back/close control is displayed at the top of the dropdown. |
| Nested Navigation | Child menus open as separate navigation levels. |
| Scroll | The dropdown can scroll vertically within the viewport. |
| Body Scroll | Background page scrolling is disabled while the main dropdown is open. |
Color Scheme:
| Setting | Description |
|---|---|
| Dropdown Color Scheme | Applies the configured Header dropdown color scheme to the Mega Menu. |
| Active/Hover Color | Applies the active or hover color to navigation links. |
| Background Color | Controls the Mega Menu background through the selected color scheme. |
The Mega Menu inherits the configured Header menu dropdown color scheme.
Typography:
The Mega Menu navigation inherits the Header's configured menu typography.
| Setting | Description |
|---|---|
| Menu Weight | Applies the Header's configured menu font weight to Mega Menu links. |
| Menu Case | Applies the Header's configured menu text case. |
| Menu Font Family | Applies the Header's configured menu font family. |
| Active/Hover Text | Changes the link color when the item is active or hovered. |
| Nested Heading Weight | Nested menu headings use a heavier font weight to distinguish parent categories. |
Interaction & Animation
Dropdown Interaction:
| Functionality | Description |
|---|---|
| Open Dropdown | Clicking the dropdown toggle opens the Mega Menu. |
| Close Dropdown | Clicking the close control closes the dropdown. |
| Outside Click | Clicking outside the active dropdown closes it. |
| Escape Key | Pressing Escape closes the active dropdown. |
| Resize Handling | The dropdown closes automatically when the browser window is resized. |
| Toggle State | aria-expanded is updated according to the dropdown's open/closed state. |
Accessibility:
The Mega Menu includes accessibility functionality for keyboard and assistive-technology users.
| Feature | Description |
|---|---|
| ARIA Controls | Dropdown buttons identify the content they control using aria-controls . |
| ARIA Expanded | Dropdown state is communicated using aria-expanded . |
| ARIA Described By | Dropdown controls reference hidden descriptive headings. |
| Keyboard Navigation | Users can navigate interactive elements using the keyboard. |
| Escape Key | Allows users to close an open dropdown using the Escape key. |
| Focus Management | Focus is moved into the dropdown when opened and returned to the trigger when closed. |
| Focus Trap | Keyboard focus remains within the active dropdown while it is open. |
| Cloned Content | Cloned marquee/navigation elements are removed from keyboard navigation and marked as hidden from assistive technologies. |
Animation:
The Mega Menu supports configurable animation data passed through the section's animation settings.
| Setting | Description |
|---|---|
| Open Animation | Animates the dropdown content when it is opened. |
| Responsive Animation | Animation frames and timing can change according to screen width. |
| Animation Timing | Uses configured animation timing/options. |
| Overflow Handling | Temporary overflow restrictions are applied while the opening animation runs. |
Marquee Component:
The code also includes a reusable Marquee Component for horizontally or vertically scrolling content.
| Functionality | Description |
|---|---|
| Horizontal Scrolling | Supports horizontal scrolling content. |
| Vertical Scrolling | Supports vertical scrolling when configured as rotated content. |
| Direction | Supports forward and reverse scrolling directions. |
| Speed | Calculates animation duration based on content size and configured speed. |
| Pause on Hover | Pauses the marquee when the user hovers over it. |
| Resume on Mouse Leave | Resumes scrolling when the cursor leaves the marquee. |
| Responsive Recalculation | Recalculates the marquee dimensions when the component size changes. |