Add promotional images, product picks, and column layouts directly inside your store's navigation menu.
Overview
Taiga's mega menu extends your navigation with rich content blocks that appear alongside your sub-menu links. Each block is attached to a top-level primary menu item by name and displays when that item is opened — in both the mobile drawer and the desktop submenu, whether it is set to Drawer or Dropdown.
Block types
Megamenu blocks are added from the Header section in the theme editor. There are three block types. Add one block per top-level menu item.
Megamenu with banners
Displays up to ten promotional images next to the submenu links. A banner is shown only when it has an image. Each banner can have a heading and a link that makes the whole banner clickable.
Megamenu with banners settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact title of the top-level menu item this block appears under. Case-sensitive. |
| Menu columns | Range | 3 |
How many columns the menu links are split into. See Manual column splits to split them yourself. |
| Dropdown background | Color or gradient | — | Optional background for this megamenu in the dropdown menu, not the menu drawer. Leave empty to use the color scheme background. Shown when the Desktop submenu type is Dropdown. |
| Banner area width | Range | 40% |
Width of the banner area next to the menu links. Use 100% when there are no menu links to show. |
| Menu and content order | Select | Menu first | Whether the menu links or the banners come first. |
| Banner columns | Range | 2 |
How many columns the banners are arranged in. |
| Aspect ratio | Select | Square (1:1) | Shape of all banners in this megamenu. Options: Natural, Portrait (2:3), Portrait (3:4), Square (1:1), Landscape (4:3), Landscape (16:9). |
| Heading position | Select | Bottom center | Where the heading sits: above the image, on top of it (top, middle or bottom, each left, center or right) or below it. |
| Heading style | Select | Body text | Options: Heading, Body text, Subheading, Primary button, Secondary button, Link. Button styles need a link to work. |
| Banner 1–10: Image, Heading, Banner link | Image, Text, URL | — | Each banner's image, optional heading (use [br] for a line break) and link. |
Megamenu with products
Displays a curated set of products next to the submenu links. Products can come from a collection or be picked one by one.
Megamenu with products settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact title of the top-level menu item this block appears under. Case-sensitive. |
| Menu columns | Range | 3 |
How many columns the menu links are split into. See Manual column splits to split them yourself. |
| Dropdown background | Color or gradient | — | Optional background for this megamenu in the dropdown menu, not the menu drawer. Leave empty to use the color scheme background. Shown when the Desktop submenu type is Dropdown. |
| Products area width | Range | 40% |
Width of the products area next to the menu links. Use 100% when there are no menu links to show. |
| Menu and content order | Select | Menu first | Whether the menu links or the products come first. |
| Product columns | Range | 3 |
How many columns the products are arranged in. |
| Select collection | Collection | — | Products from this collection are shown in the megamenu. |
| Select products | Products | — | Pick and arrange the products shown in the megamenu by hand. |
| Number of products to show | Range | 6 |
Maximum number of products shown. |
Megamenu with columns
Displays an image above each column of submenu links, for visual category navigation. Each column image can have a heading and a link.
Megamenu with columns settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact title of the top-level menu item this block appears under. Case-sensitive. |
| Menu columns | Range | 3 |
How many columns the menu links are split into. See Manual column splits to split them yourself. |
| Dropdown background | Color or gradient | — | Optional background for this megamenu in the dropdown menu, not the menu drawer. Leave empty to use the color scheme background. Shown when the Desktop submenu type is Dropdown. |
| Aspect ratio | Select | Landscape (16:9) | Shape of all column images in this megamenu. Options: Natural, Portrait (2:3), Portrait (3:4), Square (1:1), Landscape (4:3), Landscape (16:9). |
| Heading position | Select | Bottom center | Where the heading sits: above the image, on top of it (top, middle or bottom, each left, center or right) or below it. |
| Heading style | Select | Body text | Options: Heading, Body text, Subheading, Primary button, Secondary button, Link. Button styles need a link to work. |
| Column 1–6: Image, Heading, Banner link | Image, Text, URL | — | Each column's image, optional heading and link. One image slot is shown per menu column. |
Show headings above or below the image
Choose an Above or Below option in Heading position to keep the heading off the image. It reads better on busy photos and keeps the whole image visible.
Setup
Steps
- From your Shopify admin, go to Online Store → Themes.
- Click Customize next to your active theme.
- In the left sidebar, click Header.
- Confirm the correct Primary menu is selected in the Navigation settings.
- Scroll down to the Blocks area and click Add block.
- Choose a block type: Megamenu with banners, Megamenu with products or Megamenu with columns.
- In Parent menu item title, enter the exact name of the top-level menu item the block should appear under (for example,
New). The field is case-sensitive. - Configure the block's content and layout settings.
- Click Save.
The Parent menu item title field is case-sensitive. If a block does not appear in the menu, check that the title exactly matches the menu item name, including capitalisation.
The order of blocks in the theme editor determines the display order of content inside the menu. Drag blocks to reorder them.
Submenu type
Mega menu blocks work with both desktop submenu types. You can switch between Drawer and Dropdown in the Header section → Navigation settings.
When Dropdown is selected, the number of menu link columns is controlled by the Menu columns setting on each block, and each block can have its own Dropdown background.
Navigation link formatting
The sub-menu links that appear in the navigation area of a mega menu block support the same special title patterns as the top-level menu. Enter them in Shopify's menu editor on the relevant sub-menu items.
Dividers
Add a sub-menu item with the title --- to insert a horizontal divider between links in the navigation column.
Badges
Append :::badge-name to a sub-menu item title to display a badge next to that link — for example, Jackets:::new displays "Jackets" with a "new" badge.
Emphasized links
Add *** anywhere in a sub-menu item title to render it in an emphasized style — for example, ***View all.
Manual column splits
By default, the Menu columns setting distributes sub-menu links evenly across the available columns using a mathematical split. If you need uneven columns — for example, 5 items in the first column and 2 in the second — you can control the split manually using ||| in a sub-menu item title.
Add a sub-menu item with ||| in its title at the point where you want a new column to begin. The ||| item itself does not appear as a link — it acts purely as a column boundary. The number of ||| items in the menu determines the total column count automatically, overriding the Menu columns setting for that parent item.
You can combine ||| with a regular title — for example, |||Accessories — if you want the first link in the new column to carry a visible label. The ||| is stripped and only the title text is shown.
The ||| column split applies to the mega menu navigation area (drawer and dropdown). In the main drawer menu outside a mega menu panel, ||| is stripped from the title and the item renders as a normal link.
Increase discovery with in-menu promotions
Surface your best-selling or highest-margin products in the mega menu so customers encounter them while navigating, not only after reaching a collection page. Stores that promote products at the navigation level often see higher add-to-cart rates from customers who were browsing an unrelated category.
Make category navigation visual
Use the Megamenu with columns block with an editorial image per category. Visual navigation helps customers orient themselves faster and shortens the path to a product page.