A tab bar fixed to the bottom of the phone screen, within thumb reach. Three to five tabs lead to the home page, search and cart, and each tab can pop up a submenu panel.
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 Tab Bar card.
2Two ways to start
Step-by-step wizard
Click Create from your website > Build it step by step. Choose Position (Flush to the bottom or Floating) and a template, type a name and a link for 3 to 5 tabs, then choose the display style for any tab that has a submenu. Click Generate menu and you have a working tab bar.
Build it yourself
Click Create from a template > Browse templates, then choose the Blank card for an empty bar. Add each tab with Add item. Links come from your store's collections, products and pages. To start with a ready-made design, pick another template from the library.
3Fine-tune by hand
Whether you use the wizard or build by hand, you still fine-tune in Build Menu: each level 1 item is a tab. Drag to reorder, and click a tab to rename it or change its icon or link. Go to Design to change colors and font size.
Number of tabs: keep 3 to 5 tabs; with more, the text and icons get cramped. Limit: up to 3 levels (tab, item in the panel, link inside). A tab with sub-items opens a panel when tapped instead of changing the page. See Add, arrange and nest menu items.
4Typical item patterns
Click + ITEM to open the Add item popup, then choose a pattern. At level 1 each item is a tab. These are the most used patterns for a tab bar.
Tab with a submenu: tap to pop up a panel
A tab with sub-items doesn't change the page. When a shopper taps it, a submenu panel pops up right above the bar, holding categories, images or banners. Good for a Shop tab with a few product groups, with no need to leave the page. Level 2 and 3 items use the same set of patterns as the Mobile Menu drawer (Links & icons, Banner and the others in the popup).
To add: in the Add item popup choose Sub-item of "tab name" on the Insert to line, or switch on Submenu for the tab in the wizard. Details on how it opens are at the end of this article.
Open a Mobile Menu from a tab
Set the Menu tab's link to Open another Navi+ Mobile menu: a tap slides the Mobile Menu drawer out, within thumb reach. This is the most common way to have both a tab bar and a full category list.
Panel button: cart and search
Under Basics: a tab opens the theme's Open Cart or Open Search panel, or another Navi+ menu, right on the spot, with no page reload.
open:NaviMenu(…)Opens a Mobile Menu you pickopen:clickTo(CSS Selector)Clicks a button on the pageLinks & icons: a tab that leads to a page
The most basic pattern: an icon plus a label, leading to the home page, a collection or any page. Add a Divider or Space under Basics when you need to separate groups of tabs.
Page & app actions: scroll the page
Under Page & app actions: Scroll page (for example, a back-to-top button), Simulate action (imitates an action on the page) and Run JavaScript for custom needs.
Social & support: call and message
Under Social & support: a tab to call, a WhatsApp tab or a share tab, so shoppers can get in touch in one tap.
5Publish: turn the bar on for your store
Open Publish and click Turn on. The Tab Bar floats fixed at the bottom of the screen on every page, so you don't need to choose a placement in the theme. You only need Store Connector turned on.
Turn on and the bar appears right away
Off leaves the store unchanged; on shows the tab bar at the bottom. The bar stays put when shoppers scroll, and Navi+ leaves a gap at the end of the page the exact height of the bar, so it doesn't cover the footer. By default it only shows on phones. To show it on desktop too, switch on Show menu on desktop under Configure.
Edge-to-edge or arrow submenu
The submenu opens in two styles: Default (edge-to-edge) runs right to both edges of the screen, or Dropdown (arrow + margin) keeps margins and has an arrow pointing right at the tab the shopper tapped. Change it under Configure > Submenu Expand Style.
See the two opening stylesA floating bar set off from the edges
Choose Floating under Position when you create it, or adjust Margin so the bar sits away from the bottom and side edges instead of flush against them.
See position and spacingOther platforms
The steps above are for Shopify — the default way.
On Wix, Add menu opens the template library directly instead of the wizard above; choose Tab Bar, choose a template, then edit the tabs in the menu item tree. Turn it on with the Publish this menu switch, then Save; there is no Turn on button. For the cart and search tabs, link them straight to the web’s cart page and search page instead of Open Cart and Open Search.
On WordPress and other websites, Add menu opens the template library directly instead of the wizard above; choose Tab Bar, choose a template, then edit the tabs in the menu item tree. Turn it on with the Publish this menu switch, then Save; there is no Turn on button. For the cart and search tabs, link to the cart page, or enter the CSS selector of the cart button and the search box on your website (how to get it: Find the menu spot with Navi+ Live).