# 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. | --- # 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/space/sections/navigation/menu-drawer.md?ask= ``` 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.