# Dropdown

> A dropdown you build in the theme editor from menu items with images, promo cards and a banner – compact under its link, or a full-width panel. It can replace a link of your menu or add a new one.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/blocks/dropdown/

## At a glance

- **In the editor:** Dropdown – with Menu item, Promo card, Banner inside
- **Where it goes:** The Header section
- **Settings:** 15

## When to use it

Menus from Online Store > Navigation are text only. A Dropdown block adds pictures, product counts, promo cards and a notice – for *Edits*, *Gifts* or *New in*. The Tally preset uses one for its *Edits* menu.

## Set it up

1. In the Header section, choose **Add block › Dropdown**.
2. Set the **Label**. To replace a link of your main menu, enter its exact title in **Attach to menu link**; leave it empty to add a new item at the end of the menu.
3. Add **Menu item**, **Promo card** and **Banner** blocks inside the dropdown.
4. Choose the **Width**: *Compact* opens under the link; *Full width* opens across the page.

## Content

- **Menu item:** a **Title**, an optional **Subtitle**, a **Link**, an **Image** and a **Tag** such as *New* or *Sale*.
- **Promo card:** an **Image**, **Heading** and **Text**. Pick a **Collection** to link the card and show its product count, or a **Product** to show its photo and price. Each card has a **Maximum card width**, a side (left or right of the menu items) and an **Image ratio**.
- **Banner:** a notice across the top or bottom of the dropdown – delivery, a sale, opening hours – with an icon, a link and a style (*Highlight*, *Accent*, *Soft* or *Outline*).
- **Links from a menu:** fill the dropdown from another menu instead. Links with sub-links become columns; others show like menu items, with their collection image and product count.
- **Keep the link's own sub-links:** when attached to a menu link, keeps its sub-links from Online Store > Navigation next to your blocks.

## Full-width grid

- **Columns** (1–8) and **Items per column** (1–12): menu items fill the columns from top to bottom.
- **Column spacing**, and **Promo cards area** – the share of the panel width for promo cards.

## Menu items

**Image size**, **Vertical padding** and **Text size** for the menu items, and whether links from a menu show their images and their product counts or prices.

## All settings

**Block: Dropdown** (15 settings, in editor order)

Build a dropdown here, or attach it to a link from your header menu.

| Setting | Options | Default |
| --- | --- | --- |
| **Attach to menu link** – Exact title of a top-level menu link. The dropdown replaces that link. Leave empty to add a new item. | Text | – |
| **Keep the link's own sub-links** | Checkbox | On |
| **Label** – Leave empty to keep the attached link's title. | Text | Sample text |
| **Link** | Link | – |
| **Links from a menu** – Optional. Links with sub-links become columns, other links show like menu items with their collection image and product count. | Menu | – |
| **Width** | Compact · Full width | Full width |

*Full width grid*

Menu items fill the columns from top to bottom. Promo cards sit next to the menu items; set their width and side on each card.

| Setting | Options | Default |
| --- | --- | --- |
| **Columns** | 1–8 (step 1) | 4 |
| **Items per column** | 1–12 (step 1) | 4 |
| **Column spacing** | 8–64px (step 4) | 24px |
| **Promo cards area** – Share of the panel width for promo cards. Menu items get the rest. | 20–80% (step 5) | 50% |

*Menu items*

| Setting | Options | Default |
| --- | --- | --- |
| **Image size** | 24–96px (step 4) | 44px |
| **Vertical padding** | 0–20px (step 2) | 6px |
| **Text size** | 13–22px (step 1) | 15px |
| **Show images for links from the menu** – Uses the collection or product image. | Checkbox | On |
| **Show product count or price for links from the menu** | Checkbox | On |

**Block: Menu item** (5 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Title** | Text | Sample text |
| **Subtitle** | Text | – |
| **Link** | Link | – |
| **Image** | Image | – |
| **Tag** – Short text like New or Sale. | Text | – |

**Block: Promo card** (10 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Heading** | Text | Sample text |
| **Text** | Text | Sample text |
| **Collection** – Optional. Links the card and shows its product count instead of the text. | Collection | – |
| **Product** – Optional, instead of a collection. Links the card, uses the product photo when no image is set and shows the price. | Product | – |
| **Tag** – Short text like New. | Text | – |
| **Link** – Used when no collection or product is selected. Any link works here too, products included. | Link | – |

*Layout*

| Setting | Options | Default |
| --- | --- | --- |
| **Maximum card width** – Cards share the promo area evenly and never grow past this width. | 140–480px (step 10) | 320px |
| **Position** | Left of the menu items · Right of the menu items | Right of the menu items |
| **Image ratio** | Square · Portrait · Landscape · Wide | Landscape |

**Block: Banner** (6 settings, in editor order)

A notice across the whole dropdown, for delivery, a sale or opening hours.

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Rich text (one line) | Sample text |
| **Link label** | Text | Sample text |
| **Link** | Link | – |
| **Icon** | None · Sparkle · Truck · Gift · Tag · Clock · Star · Return · Chat · Pin | Truck |
| **Style** – Colors come from the dropdown's color scheme. | Highlight · Accent · Soft · Outline | Highlight |
| **Position** | Top of the dropdown · Bottom of the dropdown | Bottom of the dropdown |

## Related

- [Header](https://themelab.page/tally/docs/sections/header.md): Logo, menu, search, account and cart in three layouts, with a full-width shop panel, a transparent mode and a mobile drawer.
- [Link](https://themelab.page/tally/docs/blocks/link.md): A single link next to the header menu – plain, highlighted or a button, with an icon and a badge.
- [Header and footer](https://themelab.page/tally/docs/header-and-footer.md): The announcement bar, header layouts, menus with dropdowns and full-width panels, the search bar, language and country selectors, and the footer.