# 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. |