Everything you need to set up and customize the Menu Drawer — from configuring your navigation menu and promotional cards to adding footer blocks like account login, icon links, and localization.
A menu drawer is a slide-out navigation panel that gives your customers quick access to your store's menu, account links, and promotional content — without leaving the page they're on. It's especially important on mobile devices where screen space is limited, but Boardwalk also supports using it as the primary navigation on desktop.
In the Boardwalk theme, the Menu Drawer block uses a split-panel layout. The left side contains your navigation menu with smooth sliding panels for parent and child menu items, plus a customizable footer area at the bottom. The right side can display promotional cards with images and links — perfect for highlighting collections, sales, or new arrivals. The cards panel is automatically hidden on smaller screens to keep things clean.
Follow these steps to add and configure the menu drawer in your Boardwalk theme header.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize.
The menu drawer pulls its links from a Shopify navigation
menu. If you haven't already created one, go to
Online Store → Navigation in your
Shopify admin and create or edit a menu. You can nest menu
items up to three levels deep (parent, child, and
grandchild).
Note: The menu drawer supports up to three levels of navigation. Top-level items with children will open a sliding sub-panel. Child items with grandchildren will expand in place within that sub-panel.
In the Theme Editor sidebar, click on your Header section and find the Menu drawer block. Click on it to open its settings. Use the menu picker in the header section settings to assign the navigation menu you created in the previous step.
The menu drawer can show promotional image cards in a separate panel on the right side. Toggle this on or off in the menu drawer settings. If enabled, add Drawer card blocks to populate the panel with images and links. These cards are only visible on wider screens (tablets and up).
The Drawer footer sits at the bottom of the menu panel and can hold a variety of child blocks such as Account login, Icon link, Button, Localization, Social icons, Text, Divider, Image, and Spacer. Click on the Drawer footer block and use Add block to add the items you want.
Click Save in the Theme Editor. Preview your store and tap the menu icon (hamburger button) to verify the drawer opens correctly, navigation links work, and your cards and footer blocks display as expected.
These settings are available when you click the top-level Menu drawer block in the Theme Editor sidebar.
Sets the color scheme for the main menu panel (the left side with your navigation links and footer).
Toggles the promotional cards panel on the right side of the drawer. When turned off, the main menu panel expands to fill the full width. The cards panel is automatically hidden on phones regardless of this setting.
Sets the color scheme for the promotional cards panel. Use a different scheme from the menu panel to create visual contrast.
The menu drawer uses a layered navigation system that handles up to three levels of menu items smoothly and intuitively.
When the drawer opens, visitors see your top-level menu links. Items without children link directly to their assigned page. Items that have child links display a chevron arrow and, when tapped, slide in a new panel showing the child items.
Each parent item with children gets its own sliding sub-panel. A back button at the top of the sub-panel shows the parent category name and returns the visitor to the main menu when tapped. Child items that have their own children (grandchild items) expand in place — they don't create another sliding panel.
Grandchild links appear as an expandable list beneath their parent child item. Tapping the child item toggles the grandchild list open or closed, with the chevron icon rotating to indicate the current state.
Visitors can close the drawer by tapping the close button, clicking the overlay area outside the drawer, or pressing the Escape key on a keyboard. The drawer also closes automatically when visitors navigate to a new page through a menu link.
The menu drawer includes full keyboard support and uses
proper ARIA attributes such as
aria-hidden, role="menu", and
aria-current="page" for the active page.
Slide and fade animations are automatically disabled when
a visitor has their device set to prefer reduced motion.
Drawer cards are promotional image blocks that appear in the cards panel on the right side of the menu drawer. You can add multiple cards to showcase collections, seasonal promotions, or featured pages. Each card displays an image with an optional button label overlay.
The image displayed on the card. For best results, upload an image that matches the aspect ratio you select below. The image will be cropped to fit if the proportions don't match.
Optional text displayed as a button overlay at the bottom of the image. Use this for a call-to-action like "Shop New Arrivals" or "View Collection." If left empty, the card displays the image alone.
The URL the card links to when clicked. You can link to any page, collection, product, or external URL.
Controls the proportions of the card image. Options:
Square, Landscape,
Portrait, Widescreen, and
Tall.
Sets the color scheme for the individual card, which affects the button overlay and placeholder styling.
The Drawer footer is a container block that sits at the bottom of the menu panel. It acts as a parent for various child blocks that let you add useful links, buttons, and other elements below your navigation menu. The footer is a static block — it's always present and can't be removed or duplicated, but you can customize it and add child blocks to it.
Sets the color scheme for the footer area. This can differ from the main menu panel to create a visual distinction at the bottom of the drawer.
Displays a thin horizontal line at the top of the footer to visually separate it from the navigation menu above.
Controls the spacing above the footer content. Range: 0px to 48px.
Controls the spacing below the footer content. Range: 0px to 48px.
Controls the vertical spacing between child blocks inside the footer. Range: 8px to 32px.
The following blocks can be added inside the Drawer footer. Click Add block within the Drawer footer in the Theme Editor to see the full list.
Displays a sign-in or account link that changes based on whether the visitor is logged in. When logged out, it shows a sign-in link that directs to the login page. When logged in, it shows a "My Account" link to their account page. You can customize the text for both states and optionally show an account icon next to the text.
A flexible link block that pairs an icon with custom text. Choose from a large library of icons across categories including navigation, e-commerce, shipping, account, communication, apparel, furniture, and more. Great for linking to things like store locations, contact pages, sizing guides, or FAQs. Links can optionally open in a new tab.
Adds a styled button to the footer. Use this for prominent calls to action like "Shop Now" or "Contact Us."
Adds a language and country selector to the footer, allowing visitors to switch their preferred language or market directly from the menu drawer.
Note: You must first set up languages
and markets in your Shopify admin under
Settings → Languages and
Settings → Markets before the
localization block will display anything in the drawer.
Displays your store's social media icons. The icons are pulled from the social media URLs you've entered in your theme settings. Only platforms with a URL filled in will display an icon.
Note: To configure your social media
links, go to
Theme settings → Social media
in the Theme Editor and enter the full URL for each
platform you want to display.
Adds a custom text block to the footer. Use this for short messages, store hours, or any other information you want to display below the menu.
Adds an image to the footer area. This can be useful for displaying a badge, certification logo, payment icons, or other visual elements.
Inserts a horizontal line between other footer blocks to create visual separation.
Adds empty vertical space between blocks. Use this to fine-tune the layout and spacing of your footer content.
The Account login block provides a convenient way for visitors to access their account or sign in directly from the menu drawer. It automatically adjusts its text and link based on whether the visitor is currently logged in.
Displays an account icon (person silhouette) next to the login text.
The text displayed when the visitor is not signed in. This link takes visitors to the login page.
The text displayed when the visitor is signed in. This link takes visitors to their account page.
Controls the horizontal alignment of the login link.
Options: Left, Center, or
Right.
Note: Customer accounts must be enabled in
your Shopify admin under
Settings → Customer accounts for the
login link to work. If accounts are disabled, the link will
not lead anywhere.
The Icon link block lets you add custom links with icons to the drawer footer. It's a versatile block with a large selection of built-in icons, making it easy to create links to store locators, FAQs, size guides, contact pages, or anything else.
Choose an icon from the built-in library. Icons are
organized into groups: Navigation (menu, search,
filter, grid, list), E-commerce (cart, bag, heart,
star, tag, percent, gift, receipt, credit card, wallet,
storefront), Shipping (truck, package, map pin, clock,
calendar, return), Account (sign in, sign out),
Communication (email, phone, chat, share), Apparel
(t-shirt, pants, dress, hanger, sneaker, watch, ruler),
Furniture (armchair, couch, bed, lamp, desk, cabinet,
plant), and Misc (info, question, shield, lock,
sparkle, leaf, globe, sun, moon). Select
None to hide the icon entirely.
The label text displayed next to the icon.
The URL this icon link points to. You can link to any page, collection, product, or external URL.
When enabled, the link opens in a new browser tab instead of navigating away from the current page.
Controls the horizontal alignment of the icon link.
Options: Left, Center, or
Right.
Understanding how the menu drawer blocks are organized will help you find and configure them in the Theme Editor. Here's how the blocks nest inside each other.
Header (section)
└─ Menu drawer (block)
├─ Drawer footer (static block — always present)
├─ Account login
├─ Icon link
├─ Button
├─ Localization
├─ Social icons
├─ Text
├─ Image
├─ Divider
└─ Spacer
└─ Drawer card (multiple allowed — displays in the cards panel)