> 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/banner-mega-menu.md).
# Banner ( Mega menu )
**Banner (Mega menu)** turns one of your top level menu items into a full width dropdown that mixes collection links with promotional banners and a call to action button. Shoppers see it when they hover or click that menu item in the header, on desktop. Use it for the menu item that carries your current campaign, such as a seasonal sale or a new drop, where a plain text dropdown would not sell the story.
This is the richest of the three mega menu types: it is the only one that combines collections, image banners, and a button in the same dropdown.
### Which mega menu should you use
| Type | Shows | Pick it when |
| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| **Banner ( Mega menu )** | Collection columns, up to five image banners with heading and button, plus a menu button | You are promoting a campaign and want images inside the menu |
| [Product ( Mega Menu )](/velare/set-up-your-store/header-group/header/product-mega-menu.md) | A grid of products you select | You want to push best sellers or new arrivals |
| [Collection ( Mega Menu )](/velare/set-up-your-store/header-group/header/collection-mega-menu.md) | A grid of collections you select | You want shoppers to browse a large catalog by category |
### Where to find it
{% 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 **Banner (Mega menu**).
4. In **Banner (Mega menu)**, enter the name of the level 1 menu item this mega menu belongs to, matching the text exactly (including capitalization).
{% endhint %}
*Result:* hovering or clicking that menu item in the preview opens the mega menu instead of a standard dropdown.
### General
| 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 fit the whole campaign on one screen, fewer columns give each link room to breathe. |
### Buttons
| Setting | Description |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button label** | The wording on the call to action that closes the dropdown, for example *Shop the sale*. A few words read as an action, a sentence does not. |
| **Button link** | Where that call to action takes shoppers, usually the collection or landing page the campaign is built around. |
### Collections
| Setting | Description |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| **Number of columns** | How many columns the collection links are spread over. Keep it low when your collection names are long, or they wrap onto two lines. |
| **Collections** | The collections shoppers can jump to from this dropdown. Add them in the order you want them read, with the ones the campaign is about first. |
### Banner settings
| Setting | Description |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width** | How much of the dropdown the images take, and therefore how much is left for the collection links beside them. Widen it when the pictures are the reason shoppers open this menu. |
| **Number of columns** | How many images sit side by side. Fewer columns give each picture more room, more columns show the full set without scrolling. |
| **Content position** | Whether the wording sits at the **Top**, **Middle**, or **Bottom** of each image. Put it over the emptiest part of the photo so it stays readable. |
| **Content alignment** | Whether that wording lines up **Left**, **Center**, or **Right**. Centered reads like a poster, left aligned is easier to follow in a narrow column. |
### Banner
| Setting | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image** | The picture shoppers see in this slot of the dropdown. Choose one with a calm area, since the wording and button sit on top of it. |
| **Color scheme** | The colors of the text and button laid over that picture, taken from **Theme settings > Colors**. Pick a scheme that stays legible against the photo. |
| **Subheading** | A short line above the main one, usually the context: a category, a season, or a deadline such as *Ends Sunday*. |
| **Heading** | The line shoppers actually read before deciding to click. One short phrase lands better than a full sentence at this size. |
| **Description** | The supporting line under it, for the detail the headline had no room for, such as what is included or who it is for. |
| **Button label** | The wording on this picture's own call to action, for example *Shop now*. |
| **Link** | Where this picture sends shoppers when they click it. |
These settings are available for Banners #1, Banners #2, Banners #3, Banners #4, Banners #5.
### What changes on the storefront
* The named menu item opens a wide dropdown instead of a plain list, 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 mega menu does not appear and the item keeps its normal dropdown.
### Related pages
* [Header](/velare/set-up-your-store/header-group/header.md): menu selection, dropdown trigger, and animation
* [Product ( Mega Menu )](/velare/set-up-your-store/header-group/header/product-mega-menu.md): the product-led alternative
* [Collection ( Mega Menu )](/velare/set-up-your-store/header-group/header/collection-mega-menu.md): the collection-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/banner-mega-menu.md?ask=&goal=
```
`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.