# Menu drawer ![](https://docs-assets.foxecom.app/motrix-theme/cb0eef91-38e3-4017-a441-7d9203ddeae1.png) 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**. ![](https://docs-assets.foxecom.app/motrix-theme/d3860031-b86a-4668-beae-edab1fe7c00f.png) ## Menu ![](https://docs-assets.foxecom.app/motrix-theme/2395e2fa-8e6c-45c3-9d07-58bbf40fd6e1.png) 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:* ![](https://docs-assets.foxecom.app/motrix-theme/c0d242ad-5be7-4c7d-8dd9-92fe2f9e7e7d.png) 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 ![](https://docs-assets.foxecom.app/motrix-theme/fa3f89ae-f327-4c02-909e-c5027446c2d8.png) 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.