# Menu drawer

### Section overview

The Theme Menu section provides a fully customizable slide-out navigation menu for your Shopify store, accessible from both mobile and desktop devices. It supports nested menu items, featured collections, promotional content, and localization options.

#### Common use cases

* Primary navigation for your store with multi-level menu hierarchy
* Showcasing featured collections within nested menu dropdowns
* Displaying promotional content or announcements to shoppers
* Providing language and region selection options for international stores

#### Usage tips

* Configure both a mobile-specific and desktop menu in your theme settings for optimal user experience
* Limit the number of top-level menu items to prevent overwhelming users
* Add visual elements like collection products or images to enhance nested menu items
* Ensure all menu links have clear, descriptive labels for better navigation
* Test the menu on various device sizes to ensure proper display and functionality on mobile devices

### Section settings

| Setting                | Description                                                                        |
| ---------------------- | ---------------------------------------------------------------------------------- |
| Color scheme (top bar) | Sets the background and text color for the top bar area of the menu.               |
| Color border (top bar) | Controls the border style for the top bar area - can be subtle, strong, or none.   |
| Color scheme (main)    | Sets the background and text color for the main menu area.                         |
| Color border (main)    | Controls the border style between menu items - can be subtle, strong, or none.     |
| Font family            | Selects the font style for menu items - standard, heading, or navigation.          |
| Show search button     | Enables or disables the search input field at the top of the menu.                 |
| Show chevrons          | Toggles the display of chevron icons for menu items with nested menus.             |
| Color scheme (bottom)  | Sets the background and text color for the bottom section of the menu.             |
| Color border (bottom)  | Controls the border style for the bottom section - can be subtle, strong, or none. |

### Block settings

#### Content

A promotional content block that can be added to the menu to highlight important information or promotions.

* Block limit: 1

| Setting                  | Description                                                    |
| ------------------------ | -------------------------------------------------------------- |
| Heading                  | The title text for the promotional block.                      |
| Content                  | Rich text content for the promotional message.                 |
| Button label             | Text to display on the call-to-action button.                  |
| URL                      | The destination page when the button is clicked.               |
| Image                    | An optional image to display with the content.                 |
| Show image as background | Toggle to use the image as a background instead of inline.     |
| Video                    | An optional video to display with the content.                 |
| Enable autoplay          | Automatically plays the video when visible.                    |
| Enable mute toggle       | Shows a button to toggle video sound on/off.                   |
| Enable loop              | Continuously loops the video playback.                         |
| Minimum height           | Sets the minimum height for the content block in pixels.       |
| Enable padding           | Adds interior padding to the content block.                    |
| Color scheme             | Background and text color for the content block.               |
| Color border             | Border style for the content block.                            |
| Text color               | Forces text to be light, dark, or default based on background. |
| Button color             | Style and color of the call-to-action button.                  |
| Enable gradient          | Applies a gradient overlay to the background.                  |
| Text position            | Places text above or below the image/video.                    |
| Vertical alignment       | Positions content at the top, middle, or bottom.               |
| Horizontal alignment     | Aligns content to the left, center, justify, or right.         |

#### Collection

Displays products from a selected collection within a nested menu.

* Block limit: 8

| Setting     | Description                                               |
| ----------- | --------------------------------------------------------- |
| Linked menu | The menu item handle this collection should be linked to. |
| Collection  | The product collection to display in the nested menu.     |

#### Image

Displays a featured image within a nested menu.

* Block limit: 8

| Setting     | Description                                          |
| ----------- | ---------------------------------------------------- |
| Linked menu | The menu item handle this image should be linked to. |
| Image       | The image to display in the nested menu.             |

#### Announcement

Displays a promotional announcement at the top of the menu.

* Block limit: 1

| Setting              | Description                                             |
| -------------------- | ------------------------------------------------------- |
| Content              | Rich text content for the announcement message.         |
| Color scheme         | Background and text color for the announcement.         |
| Horizontal alignment | Aligns announcement text to the left, center, or right. |