> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/header-group/mobile-menu/available-blocks.md).

# Available Blocks

The mobile menu drawer is built from two containers — **Content** and **Bottom** — each holding its own child blocks. The logo above them is a section setting, not a block.

***

## Container Overview

| Container           | Child Blocks                                           |
| ------------------- | ------------------------------------------------------ |
| [Content](#content) | Search bar, Menu, Quick links                          |
| [Bottom](#bottom)   | Account, Localization and history, Socials media links |

***

## Logo

The logo at the top of the drawer is set on the **Mobile menu** section under the **Logo** header — it is not a block and cannot be removed. The image comes from [Logo and Favicon](/helix/theme-settings/logo-and-favicon.md).

**Setup:**

1. Set **Logo style** — pick which uploaded logo to show. Use the transparent version if your drawer background is dark.
2. Set **Width** — the display size of the logo.

***

## Content

The main scrollable body of the drawer. Holds the Search bar, Menu, and Quick links.

**Gap** — vertical spacing between the blocks inside Content.

***

### Search bar

An inline search input at the top of the Content area. Shoppers can type right away without closing the menu.

**Setup:**

1. Set **Height** — the height of the search input.

***

### Menu

Renders your Shopify navigation as a vertical list. Shoppers tap a top-level item to expand its sub-items. Required — the drawer has no navigation without it.

**Setup:**

1. Select a **Menu** — any navigation menu from your Shopify admin (**Online Store → Navigation**).
2. Toggle **Show divider** — adds a separator line between top-level items.
3. Set **Menu typography** — font, size, letter spacing, and text case for top-level items.
4. Set **Submenu typography** — font, size, text case, and color for sub-items.

To add product grids, banners, collection images, swatches, or highlight colors to specific menu items, see [Menu Block](/helix/header-group/mobile-menu/menu.md).

***

### Quick Links

A shortcut list shown below the navigation. It can optionally collapse behind a heading.

**Setup:**

1. Select a **Menu** — the list of shortcut links to show.
2. Set **Heading** — the label above the links.
3. Toggle **Collapse menu** — lets shoppers expand and collapse the list.
4. Set **Icon** — the expand/collapse icon (shown only when Collapse menu is on).
5. Set **Heading gap** — spacing between the heading and links.
6. Set **Menu gap** — spacing between link items.
7. Set **Heading typography** — font, size, and letter spacing for the heading.
8. Set **Size** — the text size of the links.
9. Set **Color** — the text color of the links.

***

## Bottom

The utility strip pinned to the bottom of the drawer. Holds Account, Localization and history, and Socials media links.

**Setup:**

1. Set **Type** — **Inherit** to match the drawer's colors, or **Color Scheme** to pick a distinct scheme (e.g. a dark strip inside a light drawer).
2. Set **Alignment** — align items to the Left, Center, or Right.
3. Set **Gap** — horizontal spacing between items.
4. Toggle **Show dividers** — a separator line between items.
5. Set **Padding** — top and bottom padding for the strip.

***

### Account

A full-width button that opens the account panel — sign-in for guests, or the customer's account and menu once they are signed in. Signed in, the button is replaced by the customer's avatar and first name.

**Setup:**

1. Set **Style** — the button style.
2. Set **Height** — the button height.

{% hint style="info" %}
**Style** applies to the signed-out button only; **Height** applies either way. The menu inside the panel is set in [**Theme Settings → Customer account**](/helix/theme-settings/customer-account.md), and the block only shows when customer accounts are turned on in **Shopify admin → Settings → Customer accounts**.
{% endhint %}

***

### Localization and history

Shows the country/region selector, language selector, and a recently viewed link in one compact row.

**Setup:**

1. Toggle **Show country/region selector** to let shoppers switch currency.
   * **Show country name** adds the country name next to the currency.
   * **Show country flag** shows the country flag.
2. Toggle **Show language selector** to let shoppers switch language.
3. Toggle **Show recently viewed** to add a recently viewed link.
   * Set the **Page link** — the URL of your recently viewed page.
   * Set **Type** — whether the link shows as an icon, text, or both.
4. Set **Gap** — horizontal spacing between the items.

{% hint style="info" %}
Country and language options are powered by Shopify Markets. Manage them at **Shopify admin → Markets**.
{% endhint %}

***

### Socials media links

A row of social media icon links. The icons come from your store's global social links — set the account URLs in [**Theme Settings → Social media**](/helix/theme-settings/social-media.md). There are no per-platform child blocks to add.

**Setup:**

1. Set **Gap (mobile)** — spacing between the icons.
2. Set **Icon width** — the size of each icon.
3. Set **Border thickness**, **Corner radius**, and **Shadow** as needed.
4. Set **Color type** — keep the drawer's colors, or apply a separate color scheme to the icons.

{% hint style="info" %}
This is the same block used in the footer, so a few of its settings — the desktop gap and the block's top/bottom padding — are hidden here. Only the mobile gap applies inside the mobile menu.
{% endhint %}