> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/navigation/menu-drawer.md).

# Menu Drawer

Configure the Volume menu drawer: choose a menu, set pinned blocks (language, buttons, account, store selector), and add menu item images for non-collection navigation items.

The **Menu drawer** section is located in the **Overlay** group at the **bottom of the left panel**.

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FO6YZPu9GNRoTsehtrCiL%2Fimage.png?alt=media&#x26;token=1c26b983-62f6-4654-9433-fc95bf7b90e2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This section powers **mobile navigation** on its own — regardless of which desktop **Menu Style** you use (Single Menu, Two Menus, Smart Category Menu). The mobile burger icon always opens the Menu Drawer, so it needs its own menu selected here even if a different menu is already assigned in the **Header** section for desktop. See [**Header & Menu Styles**](/docs/volume-themes/navigation/header-and-menu-styles.md) for how the two relate.
{% endhint %}

Depending on whether the Burger menu is enabled, it can appear in different ways:

* **On desktop:** Enable it in the **Header** section by ticking **Show burger** under the **Burger menu** heading. You can also adjust its display and positioning there.
* **On mobile:** It appears by default. You can set its position in the **Header layout** selector under **Mobile layout** in the **Header** section.

### Configuration

{% stepper %}
{% step %}

### **Choose a menu**

* Select an existing menu or create a new one specifically for the **Menu drawer**.
* You can also use the [**Smart Category Menu**](/docs/volume-themes/navigation/smart-category-menu.md) feature by ticking the **Smart Category Menu** checkbox.
* To highlight a menu item, enter its name in the **Highlight menu items** field. Separate several names with commas.
* To display collection images, tick **Show collection image** and adjust the image with **Media ratio**, **Focal point** and **Corner radius**.
* **Show collection banner** adds a banner for the opened collection, with its own **Media ratio**, **Focal point**, overlay settings and **Banner color scheme**.

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FO6D81hBPwdyK42lZ7JkR%2Fimage.png?alt=media&#x26;token=1d93fdc6-d211-48ec-a8e0-b08a833a084c" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Set a pinned block**

Use the **Pinned block** selector to choose which block will stay fixed at the bottom of the **Menu drawer**:

* None
* Country and language
* Buttons
* Account
* Context image
* Store selector
  {% endstep %}

{% step %}

### **Add and arrange blocks**

Place the necessary blocks below the **Menu** and arrange them in the desired order. The available blocks are **Text**, **Social media**, **Context image**, **Banner slideshow**, **Country and language**, **Store selector**, **Custom liquid**, **Account**, **Buttons**, **Secondary menu**, **Menu item image**, **Nested menu**, **Line** and **Empty space**.

{% hint style="success" icon="lightbulb" %}
The **Empty space** block should be added at the bottom to create padding and prevent the last block from being covered by the **Pinned block**.
{% endhint %}
{% endstep %}

{% step %}

### Menu item image block

The **Menu item image** block allows you to add an image for a **menu item with nested items**, as long as it is **not a collection**.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
The **Store selector** block and pinned block only point at the selector — the stores themselves are set up in the **Store selector drawer** section in the **Overlay** group.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/volume-themes/navigation/menu-drawer.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.