A menu drawer that slides out from the edge of the screen when a shopper taps the ☰ button. It holds the whole category tree, up to 3 levels, with a header, a search box and pinned items.
Before you start: Navi+ is installed and you have turned on Store Connector in your theme.
1Choose a menu type
In Navi+ click Add menu, then choose the Mobile Menu card.
2Two ways to start
Step-by-step wizard
Click Create from your website > Build it step by step. Choose a design template (the template sets the drawer's shape and header), then choose a list of links taken from your store, such as the Shopify menu, collections or pages, and a display style. The last screen asks How does this menu open?.
Build it yourself
Click Create from a template > Browse templates, then choose the Blank card for an empty menu. Add each item with Add item. Links come from your store's collections, products and pages.
Need both desktop and phone? Build the Desktop Mega first, then embed it here at step 4.
3Fine-tune by hand
Whether you use the wizard or build by hand, you still fine-tune in Build Menu: add items, drag to reorder, and click an item to rename it or change its link or image. Go to Design to change colors and font size.
Limit: up to 3 levels (category, sub-category, link inside). An item with children shows a › mark, and when a shopper taps it, the next level slides in. Change the slide direction under Configure > Slide-in direction (left, right, top, bottom, full screen, floating window, sidebar). See Drawer settings.
4Typical item patterns
Click + ITEM to open the Add item popup, then choose a pattern. Besides the usual patterns such as Links & icons or Banner, the drawer has a few special patterns that you can only insert at level 1.
Embed Mega menu: reuse the Desktop Mega tree
One item pulls the whole Desktop Mega Menu into the drawer: columns, groups and submenu items collapse into a vertical list, with their levels kept. Edit in the Mega and the phone updates with it, so the two never fall out of sync. The embedded item goes at level 1.
To add: + ITEM > Special > Embed Mega menu, or in the Mega open Configure > Smart responsive, click Copy embed item and paste it at level 1 of the Mobile Menu. For an item that only suits a computer, turn on Exclude when embedded under Visibility of that item. The Mobile Menu can still add its own items around the embedded item, such as a search box or a WhatsApp button. Case study: one menu tree for Mega Menu, Mobile Menu and Tab Bar
Top header: a ready-made header
Under Basics: the logo, shop name, search box, quick links, account and social media in one block at the top of the drawer. Use only one per drawer, placed at the very top.
Sticky line: pin the top and bottom
Under Special: add the Pin header and Pin footer rows so the items above and below stay in place while only the middle scrolls. Good for pinning a search box at the top and a log-in button at the bottom.
Shopify menu: embed the whole Shopify menu
Under Special: one item takes the whole menu you manage in Shopify (Online Store > Navigation). Edit it on the Shopify side, then click Sync now to update. It is only in a Mobile Menu, placed at level 1.
Tabs: several panels in the drawer
Under Basics: split the drawer into a horizontal tab bar (Women, Men, Kids), with each tab holding its own categories. Shoppers switch tabs by tapping, with no page reload.
5Publish: choose the menu open button
Open Publish, choose the button that shoppers tap to open it, then click Turn on. The Mobile Menu does not show on the page by itself: turning it on with no open button shows nothing. Navi+ has already found the ☰ button on your theme.
Open from the theme's ☰ button
Use your existing menu icon: shoppers tap the familiar ☰ button in the header, and the Navi+ drawer slides out in place of the theme's old drawer. Recommended when the theme already has a ☰ button. If there isn't a suitable button, choose Add a ≡ button to your header or Floating button.
Open from an item in another menu
Set the item's link to open:NaviMenu(…) (the code is at the bottom of the Publish window; click it to copy). The most common way: the Menu tab on a Tab Bar opens this drawer directly, within thumb reach. It needs no theme support and always works.
Slide direction and drawer shape
By default the menu slides in from the left. Change it to right, top, bottom, full screen, floating window or fixed sidebar under Configure > Slide-in direction. Some templates have a fixed shape, so this option is hidden for them.
See drawer settingsOther platforms
The steps above are for Shopify — the default way.
On Wix, Add menu opens the template picker directly instead of the wizard above. Turn the menu on with the Publish this menu switch, then Save; there is no Turn on button. Wix has no “Menu in Section” app block, so the site’s ☰ button needs the CSS selector of that button. Opening it from a Tab Bar or a floating button doesn’t need one. The Shopify menu item is only on Shopify.
On WordPress and other websites, Add menu opens the template picker directly instead of the wizard above. Turn the menu on with the Publish this menu switch, then Save; there is no Turn on button. There is no “Menu in Section” block, so the theme’s ☰ button needs the CSS selector of that exact button (how to find it: Find the menu spot with Navi+ Live). Opening it from a Tab Bar or a floating button doesn’t need one. The Shopify menu item is only on Shopify.