> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/set-up-your-store/header-group/header/collection-mega-menu.md).

# Collection ( Mega Menu )

**Collection (Mega Menu)** turns one of your top level menu items into a dropdown that shows collections as a visual grid rather than a list of text links. Shoppers see it when they open that menu item in the header on desktop, which helps them find the right category quickly when your catalog is large or seasonal.

Pick this type when the menu item is about categories. If it should feature individual products, use [Product ( Mega Menu )](/velare/set-up-your-store/header-group/header/product-mega-menu.md); if it carries a campaign with banners and a button, use [Banner ( Mega menu )](/velare/set-up-your-store/header-group/header/banner-mega-menu.md).

<figure><img src="/files/lfxDziuWXFh443961UFG" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, under the **Header** group, select the **Header** section.
3. Click **Add block**, then choose **Collection ( Mega Menu )**.
4. In **Collection ( Mega Menu )**, enter the name of the level 1 menu item this mega menu belongs to, matching the text exactly (including capitalization).
   {% endhint %}

*Result:* opening that menu item in the preview shows the featured collections grid.

### General <a href="#general" id="general"></a>

<figure><img src="/files/oP3QDnQQ9Dce0REu9eqQ" alt=""><figcaption></figcaption></figure>

| Setting                  | Description                                                                                                                                                              |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Menu item**            | Ties this dropdown to one of your top level menu items. Type that item's name exactly as it reads in your menu, capitals included, or the item keeps its plain dropdown. |
| **Desktop menu columns** | How many columns the dropdown is split into on desktop. More columns show more at once, fewer columns give each item room to breathe.                                    |

### Collections <a href="#collections" id="collections"></a>

<figure><img src="/files/oUI3nO1iEwQ31GfF3GWZ" alt=""><figcaption></figcaption></figure>

| Setting               | Description                                                                                                                                                                            |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width**             | How much of the dropdown the category grid takes up, and how much room is left for the menu links beside it. Widen it when browsing by category is the main path through your catalog. |
| **Number of columns** | How many categories sit side by side. Fewer columns show each image larger, more columns put the whole range in front of shoppers at once.                                             |
| **Heading**           | The short line above the grid that tells shoppers how this menu is organized, such as *Shop by category*.                                                                              |
| **Collections**       | The categories shoppers see in the dropdown, in the order you add them. Revisit the list when a seasonal one ends, since nothing is removed automatically.                             |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* The named menu item opens a wide dropdown containing the selected collections, on desktop.
* Whether it opens on hover or on click follows the **Desktop dropdown menu trigger** setting on the [Header](/velare/set-up-your-store/header-group/header.md) page.
* If **Menu item** does not match a real level 1 item, including its capitalization, the item keeps its normal dropdown.
* The collections shown are the ones you select here, in the order you add them, so review the list when a seasonal collection ends.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Header](/velare/set-up-your-store/header-group/header.md): menu selection, dropdown trigger, and animation
* [Banner ( Mega menu )](/velare/set-up-your-store/header-group/header/banner-mega-menu.md): the campaign-led alternative
* [Product ( Mega Menu )](/velare/set-up-your-store/header-group/header/product-mega-menu.md): the product-led alternative


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/set-up-your-store/header-group/header/collection-mega-menu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.