# Menu drawer

The mobile drawer opens with your catalogue: collections, categories, the things people came to browse. Underneath that, customers look for a different kind of link — track my order, contact us, log in. This block is where those go.
The drawer opens on any screen narrow enough for the menu to collapse into the menu button — phones, tablets, and resized desktop windows. Customers on a full-width desktop never see it, so put their equivalent in [Custom links](https://docs.foxecom.com/motrix-theme/global-sections/header/custom-links) or [Custom icons](https://docs.foxecom.com/motrix-theme/global-sections/header/custom-icons).
## Add content
1. In the theme editor, open the **Header** section and select the **Menu drawer** block.
2. Click **Add block**.
3. Choose **Menu** for a list of links, or **Button** for a single call to action.
4. Set it up, then click **Save**.

## Menu

A plain list of links, styled as body text rather than navigation. No arrows, no expanding rows — it reads as a quiet list under the [main menu](https://docs.foxecom.com/motrix-theme/global-sections/header#general).
| Setting | What it does |
| -------- | ------------------------------------------------------------------ |
| **Menu** | The menu to list. Build it in Shopify admin > **Content > Menus.** |
Top-level items only. Any nested items in the menu you pick are ignored, so create a separate flat menu for this rather than reusing one with dropdowns.
*Demo set up preference:*

You can add more than one Menu block if you want two groups — say, support links and company links — though keep in mind the drawer has no headings to separate them.
## Button

The standard theme button, for the one action worth making obvious at the bottom of the drawer.
| Setting | What it does |
| ----------------- | --------------------------------------------------------------------------------------------------------------- |
| **Label** | The text on the button. |
| **Link** | Where it takes customers. |
| **Style** | Primary, Secondary, White, Outline, Outline subdued, or Plain. |
| **Size** | Extra small, Small, Medium, or Large. |
| **Icon** | An icon beside the label, from the theme's icon set. None by default. |
| **Icon size** | Auto matches the button size; otherwise set it from extra small to extra large. Appears when an icon is chosen. |
| **Icon only** | Drops the label and shows just the icon. Appears when an icon is chosen. |
| **Trailing icon** | Moves the icon after the label instead of before it. |
| **Width** | Fit hugs the label; Fill stretches the button across the drawer. |
## Tips
* Keep this to utility links. Anything customers browse belongs in the Mobile menu set in the Header section, where it gets the full navigation treatment.
* Use one button at most. Two competing buttons at the bottom of a drawer just slows the decision down.
* Check the drawer on a tablet as well as a phone, with the menu scrolled to the bottom. It appears at both sizes, and content that sits below the fold is content nobody reaches.