> 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/menu-structure.md).

# Menu Structure

The mobile menu drawer is made of two containers — **Content** for the navigation and **Bottom** for utilities — with a **Logo** above them.

***

## How It Works

```
┌───────────────────────────────────┐
│  Logo  (section setting)          │
├───────────────────────────────────┤
│  Content                          │
│  ├ Search bar  (optional)         │
│  ├ Menu  ← required               │
│  │   ├ Category A                 │
│  │   ├ Category B                 │
│  │   │   └ Sub-items              │
│  │   └ Category C                 │
│  └ Quick links  (optional)        │
├───────────────────────────────────┤
│  Bottom  (optional)               │
│  ├ Account                        │
│  ├ Localization and history       │
│  └ Socials media links            │
└───────────────────────────────────┘
```

**Logo** — Set on the Mobile menu section under the **Logo** header. It is not a block and is always shown.

**Content** — The scrollable body of the drawer. Holds:

* **Search bar** — a search input above the menu (optional)
* **Menu** — your navigation (required)
* **Quick links** — a shortcut list below the menu (optional)

**Bottom** — A strip pinned to the bottom of the drawer. Holds:

* **Account** — login / account button
* **Localization and history** — country/region selector, language selector, and recently viewed link
* **Socials media links** — social media icon links

***

## How to Set Up

**Step 1** — Open the **Mobile menu** section in the theme editor.

**Step 2** — Under the **Logo** header, set the logo style and width. The image is uploaded in [Logo and Favicon](/helix/theme-settings/logo-and-favicon.md).

**Step 3** — Open the **Content** container. The **Menu** inside it is required. Optionally add a **Search bar** above it and **Quick links** below.

**Step 4** — In the **Menu** block, pick a menu from your Shopify admin (**Online Store → Navigation**).

**Step 5** — Optionally open the **Bottom** container and add **Account**, **Localization and history**, and/or **Socials media links**.

**Step 6** — Adjust spacing and colors for the **Bottom** container — see [Available Blocks](/helix/header-group/mobile-menu/available-blocks.md#bottom).

![Mobile menu block structure in the theme editor](/files/IRniDgcJBgLBrNf09qDR)

***

## Opening Behavior

The drawer opens when a shopper taps the **Menu toggle** in the mobile header. Tapping outside the drawer or pressing close dismisses it.

Under the **Layout** header, the **Behavior** setting controls how the drawer appears: it can slide in from the side of the screen or rise up from the bottom.