# Menu drawer

### Section overview

The Menu section powers both the desktop sidebar menu and mobile drawer menu in your Shopify store. It provides a customizable navigation experience with support for multiple menu blocks, content areas, and special features like newsletter signup.

#### Common use cases

* Creating a primary navigation menu for your store
* Adding promotional content within the menu structure
* Collecting newsletter subscribers via a menu-integrated signup form
* Displaying important announcements within the menu

#### Usage tips

* For best results, create a dedicated navigation menu in Shopify's Navigation settings before configuring this section
* Ensure your menu has a logical structure with main categories and subcategories
* Keep mobile users in mind - avoid creating overly complex nested menu structures
* Consider the color scheme of your menu relative to your overall store design for visual consistency
* Test the responsiveness of your menu across various device sizes to ensure proper display

### Section settings

| Setting             | Description                                                 |
| ------------------- | ----------------------------------------------------------- |
| Enable sidebar      | Enables or disables the desktop sidebar menu.               |
| Logo default        | Upload a logo to display in the menu.                       |
| Desktop logo height | Set the height of the desktop logo in pixels.               |
| Mobile logo height  | Set the height of the mobile logo in pixels.                |
| Enable logo         | Show or hide the logo in the menu.                          |
| Top color scheme    | Select the color scheme for the top section of the menu.    |
| Top color border    | Select the border color style for the top section.          |
| Main color scheme   | Select the color scheme for the main section of the menu.   |
| Main color border   | Select the border color style for the main section.         |
| Bottom links        | Select a menu to use for the bottom section links.          |
| Bottom color scheme | Select the color scheme for the bottom section of the menu. |
| Bottom color border | Select the border color style for the bottom section.       |

### Block settings

#### Content

The Content block allows you to add custom content, including text, images, and videos within the menu.

Block limit: 5

| Setting            | Description                                            |
| ------------------ | ------------------------------------------------------ |
| Heading            | Add a heading for your content block.                  |
| Content            | Add rich text content to display.                      |
| Button label       | Set the text for the content block's button.           |
| Url                | Set the destination URL when the button is clicked.    |
| Image              | Upload an image to display in the content block.       |
| Image background   | Upload a background image for the content block.       |
| Video              | Upload a video to display in the content block.        |
| Enable autoplay    | Automatically play the video when visible.             |
| Enable mute toggle | Show a button to toggle video sound on/off.            |
| Enable loop        | Loop the video continuously.                           |
| Minimum height     | Set the minimum height of the content block in pixels. |
| Enable padding     | Add padding around the content block.                  |
| Color scheme       | Select the color scheme for the content block.         |
| Color text         | Select the text color style.                           |
| Color border       | Select the border color style.                         |
| Color button       | Select the button color style.                         |
| Enable gradient    | Enable a gradient background effect.                   |
| Y alignment        | Select the vertical alignment of content.              |
| X alignment        | Select the horizontal alignment of content.            |
| Text position      | Position text above or below the image/video.          |

#### Menu

The Menu block allows you to add navigation menus to your sidebar or drawer menu.

Block limit: 5

| Setting | Description                          |
| ------- | ------------------------------------ |
| Menu    | Select a navigation menu to display. |

#### Announcement

The Announcement block allows you to highlight important information at the top of your menu.

Block limit: 1

| Setting      | Description                                               |
| ------------ | --------------------------------------------------------- |
| Content      | Add rich text content for your announcement.              |
| Color scheme | Select the color scheme for the announcement.             |
| X alignment  | Select the horizontal alignment of the announcement text. |

#### Newsletter

The Newsletter block adds a newsletter signup form to your menu.

Block limit: 1

| Setting      | Description                                              |
| ------------ | -------------------------------------------------------- |
| Content      | Add rich text content to explain your newsletter.        |
| Button label | Set the text for the signup button.                      |
| Disclaimer   | Add a disclaimer or privacy policy note for subscribers. |
| Success      | Add a success message shown after subscription.          |
| Color button | Select the button color style for the signup form.       |

#### Form

The Form block adds a customizable form to your menu.

Block limit: 1

| Setting      | Description                                 |
| ------------ | ------------------------------------------- |
| Content      | Add rich text content to explain your form. |
| Color button | Select the button color style for the form. |


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/keystone/sections/sitewide/menu-drawer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
