Radian 3.0 is here — bundles, category showcase and cinematic motion.See what's new

Docs Try Theme free

Menu drawer

Updated 4 min read

The menu drawer opens from the header's menu button. On phones and tablets it is the main navigation; on desktop it can open from a burger button too. You build it from blocks: menus, links, collection images, promo cards, text and social links, with the account and country and language pickers at the bottom.

The menu drawer on a phone.
The menu drawer on a phone.

How to set it up

Step 1: Open the menu drawer in the editor

  1. In the left sidebar, under Overlays, click Menu drawer. The drawer opens in the preview.
  2. Choose which side it Opens from (1), its Width (2) and the Other links on hover effect (3): links that aren't pointed at can fade, or fade and blur.
Menu drawer settings.
Menu drawer settings.

Step 2: Add the menu

  1. Click Add block > Menu and pick a Menu (usually Main menu).
  2. Choose how child menus open: in a sliding panel or expanding in place, and whether they show as links or image cards using the images of linked collections and products.
  3. Each level of links has its own Typography and Font scale.
Menu block settings.
Menu block settings.

Step 3: Add more blocks

  1. Collections: collection images as round avatars or cards.
  2. Promo and Image: a picture with a link, for an offer or a campaign.
  3. Link: a single link with an optional badge (New, Sale) and icon.
  4. Column menu: two small menus side by side. Text, Line and Social links for the rest.

Step 4: Set up the bottom

  1. Under Bottom, show sign in / account and the country/region and language selectors.

Settings reference

Menu drawer

Drawer
Opens from Options: Left, Right.
Width Slider.
Child menu panel width On desktop, child menus open in a panel beside the drawer. On mobile they slide over it.
Full width child menu panel On desktop, the panel takes the rest of the screen beside the drawer.
Corner radius 0 uses Theme settings > Shape > Drawer corner radius.
Padding Slider.
Space between blocks Slider.
Other links on hover While a link is pointed at or focused, the others step back. Options: None, Fade, Fade and blur.
Menu button
Hover animation For the header's menu button, which opens this drawer. Options: Double glide, Contract, Staggered reveal, Shift apart, None.
Top
Show the logo Turns this on or off.
Bottom
Show sign in / account Turns this on or off.
Show country/region selector Turns this on or off.
Show language selector Turns this on or off.

Menu

Label A small caption above the links.
Menu A menu from Content > Menus.
Show product counts Next to links to collections.
Child menus
Open child menus Options: In a sliding panel, Expand in place.
Child menu style Image cards use the images of linked collections and products. Options: Links, Image cards.
Columns in the sliding panel Slider.
Card image ratio Options: Square, Portrait, Landscape.
Show "View all" link Turns this on or off.
Top-level links
Typography Options: Display, Heading, Subheading, Body.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.
Child links
Typography Theme default: the heading font in lists, the body font under image cards. Options: Display, Heading, Subheading, Body, Caption.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.
Grandchild links
Typography Options: Heading, Subheading, Body, Caption.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.

Link

Label
Link Where the link goes.
Open in a new tab Turns this on or off.
Typography Options: Display, Heading, Subheading, Body.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.
Badge For example New or Sale.
Icon Options: None, Check, Star, Heart, Sparkle, Bolt, Leaf, Globe, Clock, Chat, Mail, Location, Phone, Tag, Gift, Eye, Layers, Shipping, Returns, Warranty, Protection, Refresh, Package, Cart, Headphones, Earbuds, Speaker, Waveform, Noise cancelling, Microphone, Volume, Bluetooth, Battery, USB-C, Plug, Power, Chip, Wi-Fi, Signal, Screen, Phone, Camera, Water resistance, Temperature, Gauge, Gear, Wrench, Hammer, Dimensions, Weight, Precision, Cube.
Custom icon An image from your files.
Icon size Slider.

Collections

Heading
Collections Collections to show.
Style Options: Round avatars, Cards.
Show product counts Turns this on or off.

Promo

Image An image from your files.
Subheading
Heading
Button label
Link Where the link goes.
Style Options: Text over the image, Text under the image.
Image ratio Options: Square, Portrait, Landscape.
Color scheme Used by the card style.

Image

Image An image from your files.
Caption
Link Where the link goes.
Image ratio Options: Square, Portrait, Landscape.
Width Options: Full, Large, Medium.

Column menu

First heading
First menu A menu from Content > Menus.
Second heading
Second menu A menu from Content > Menus.

Text

Text
Typography Options: Caption, Body, Large body, Subheading, Heading.
Font scale 100% is the size of this style in Theme settings > Typography.
Font scale on mobile Slider.

Line

Width Slider.
Opacity Slider.

Social links

Heading

Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.

How it works

  • On desktop, child menus open in a panel beside the drawer; on mobile they slide over it.
  • The header's menu button opens this drawer. To show the button on desktop, turn on Header > Burger menu > Show on desktop.
  • Mega menu content does not appear in the drawer: build the phone menu with the blocks above.

Troubleshooting

The drawer is empty.

Add a Menu block and pick a menu that has links.

Collection images don't show.

The collections need images in Products > Collections.

Related

Still stuck?

Include your store URL and theme version — we'll get back to you.

Contact support