Add promotional images, product picks, and column layouts directly inside your store's navigation menu.
Overview
Taiga's megamenu 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.
Menu banners
Displays up to ten promotional images alongside the sub-menu links. Each banner can have a title, a link, and a shared image aspect ratio and text style.
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact name of the primary menu item this block attaches to. Case-sensitive. |
| Number of columns | Number | 3 |
How many columns the navigation links are split into. Between 1 and 6. |
| Aside width | Range | 40% |
Width of the banner panel relative to the full megamenu area. Between 20% and 100%. |
| Content order | Select | Menu first | Whether navigation links or banners appear first (left to right). |
| Banner columns | Number | 2 |
How many columns the banners are arranged in. Between 1 and 10. |
| Image aspect ratio | Select | Square (1:1) | Shape applied to all banner images. Options: Natural, Portrait (2:3), Square (1:1), Landscape (4:3), Widescreen (16:9). |
| Text position | Select | Bottom center | Position of the title overlay on each banner image. |
| Title style | Select | Body text | Typography style applied to banner titles. |
Up to ten banners can be added per block. Each banner slot has its own Image, Title, and Link fields.
Menu products
Displays a curated set of products alongside the sub-menu links. Products can come from a collection or be selected individually.
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact name of the primary menu item this block attaches to. Case-sensitive. |
| Number of columns | Number | 3 |
How many columns the navigation links are split into. Between 1 and 6. |
| Aside width | Range | 40% |
Width of the product panel relative to the full megamenu area. Between 20% and 100%. |
| Content order | Select | Menu first | Whether navigation links or products appear first. |
| Product columns | Number | 3 |
How many columns the products are arranged in. Between 1 and 6. |
| Collection | Collection | — | Source collection for products, displayed in the collection's current sort order. |
| Product list | Products | — | Manually selected products. Takes precedence over Collection when both are set. Up to 20 products. |
| Product limit | Number | 6 |
Maximum number of products displayed. Between 1 and 12. |
Menu columns
Displays a structured column layout with images and links alongside the sub-menu. Each column can have an optional image, title, and link. Use this block for visual category navigation.
| Setting | Type | Default | Description |
|---|---|---|---|
| Parent menu item title | Text | — | The exact name of the primary menu item this block attaches to. Case-sensitive. |
| Number of columns | Number | 3 |
How many columns appear in the navigation link area. Between 1 and 6. |
| Image aspect ratio | Select | Widescreen (16:9) | Shape applied to all column images. Options: Natural, Portrait (2:3), Square (1:1), Landscape (4:3), Widescreen (16:9). |
| Text position | Select | Bottom center | Position of the title overlay on each column image. |
| Title style | Select | Body text | Typography style applied to column titles. |
Up to six image columns can be configured per block. Each column slot has its own Image, Title, and Link fields.
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: Menu banners, Menu products, or Menu 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
Megamenu 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 navigation link columns is controlled by the Number of columns setting on each block.
Navigation link formatting
The sub-menu links that appear in the navigation area of a megamenu 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 Number of 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 Number of 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 megamenu navigation area (drawer and dropdown). In the main drawer menu outside a megamenu 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 megamenu 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 Menu columns with an editorial image per category. Visual navigation helps customers orient themselves faster and shortens the path to a product page.