Mobile Bottom Navigation Bar

Add a sticky, app-like bar with quick actions for mobile shoppers.

A bottom navigation bar is a sticky bar of icons that stays on screen while shoppers scroll — like the tab bar in a mobile app. Use it to give mobile shoppers one-tap access to the pages and actions they use most: Home, the menu, the cart, search, a chat, a phone call and more. An item can also open a small submenu (for example a More item with account, contact and FAQ links).

The bottom navigation bar is available on the Pro Navigation plan. See Plans and Billing.

The bottom bar editor: settings tabs (1) and live preview (2)

The editor has two parts:

1. Settings tabs in the left sidebar: Menu items, General, Typography, Colors, Position, Advanced and Version history.

2. Live preview of the bar. Use the desktop / mobile buttons under the preview to switch the preview device.

Create a Bottom Bar

1

Create the menu

On the app Home page, click Add bottom navigation. You can also go to Menu manager > Create menu and choose Mobile bottom bar. The bottom bar editor opens.

2

Edit, add or remove items

In the Menu items tab, hover over an item to show its actions: Edit (✏️), Duplicate and Delete (🗑️). Click Add item to add an item at that level. Items indented under another item become its submenu.

Hover over an item to Edit, Duplicate or Delete it

3

Set the item's icon, title and link

Click Edit to open Edit menu item. Choose an Icon (click Change), enter a Title, then click the Link field to choose what the item does.

Click the Link field to choose the item's action

4

Choose an action

In Select link, click Select next to an action (1). Its syntax is copied into the Link box (2) — replace the placeholder in brackets with your own value, for example /collections/[collection-handle] → /collections/summer-sale. Then click Update (3).

Click Select (1), edit the link (2), then click Update (3)

5

Style, position and publish

Adjust the General, Typography, Colors and Position tabs (see below). Click Save, then Publish at the top right of the editor.

The bar is shown through the app embed, like all menus. If it doesn't appear on your storefront, make sure the app embed is on for that theme. See Enable App Embed.

✏️ Item Settings

In Edit menu item:

Setting	What it does
Icon	Click Change to choose an icon or upload an image.
Title	The text under the icon.
Link	What happens when the item is tapped. Click it to open Select link (see Item Actions below). Click ⊗ to clear it.
Open in new tab	Opens the link in a new browser tab.
Description	Optional short text shown with the item.
Icon size	Icon size in px.
Box > Border radius	Rounds the corners of the item's box (0–100 px).
Box > Box padding	Space inside the item's box (0–100 px).
Box > Position	Moves the item left (negative values) or right (positive values), from −100 to 100 px.

Further down the panel you'll also find:

• Color — colors for this item only: text, icon, icon background and background, each with a hover color. Click Clear settings to go back to the bar's colors.

• Badge — a small label on the item, with a Title, Badge text color and Badge background color.

• Visibility — Hide on desktop, Hide on mobile, Hide when logged in, Only show when logged in, and Schedule publishing (with Date starting / Date ending).

• Advanced — an Extra classname for custom CSS, and Divide.

🔗 Item Actions

Select link groups the available actions into eight sections. Click (i) next to an action to see an example.

Section	Actions and syntax
1. Link to your store internal pages	Exact short url /[your-url], Home page /, All products /collections/all, Products by collection /collections/[collection-handle], A product detail /products/[your-product-shorturl], All blog posts /blogs/news, A blog posts detail /blogs/news/[your-blog-shorturl], A page detail /pages/[your-page-shorturl], Cart page /cart, Search page /search, Contact form /pages/contact
2. Open panels (Compatible with popular themes)	Open Menu (mobile) gm-open:MobileMenu, Open Cart gm-open:Cart, Open Search gm-open:Search
3. Open other applications	Open Chatbox gm-open:Inbox (opens the Shopify Inbox chat)
4. Scroll on page	Scroll to top gm-scroll:Top, Scroll to bottom gm-scroll:Bottom, Scroll to a on-page element gm-scroll:OnPage(htmlElement)
5. Call javascript function	gm-javascript:Function — runs a JavaScript function on your site
6. Support tools	Make a phone call tel:, Send a SMS message sms:, Send an email mailto:, Chat with Messenger, Whatsapp, Telegram, Line or Zalo
7. Share	Copy current URL gm-share:CopyUrl, Share to Facebook gm-share:Facebook, Share to X (Twitter) gm-share:X
8. Link to extend websites	Full url (any full address, e.g. https://globo.io), Don't redirect #

Sections 2–4: open panels, other applications and scrolling

Sections 5–6: JavaScript and support tools

Sections 7–8: share and external links

Examples:

• gm-scroll:Top(150) — scrolls to the top, leaving a 150 px margin.

• gm-scroll:OnPage(#page-title) — scrolls to the element with the ID page-title.

• tel:[phone] — calls this number.

• sms:+012345678?body=I need product — opens an SMS with the text filled in.

• https://wa.me/0123456789 — opens WhatsApp chat (phone number with country code, without +).

Open panels work with popular themes, because they open the theme's own menu drawer, cart drawer or search. If nothing happens on your theme, link to the page instead (for example Cart page /cart), or contact us.

🎨 Look and Position

General

General settings: submenu position and open style

Section	Settings
Main menu (Level 1)	Menu rounded (corner radius of the bar), Item spacing, Padding inline, Padding block, Use box shadow
Submenu (Level 2, 3)	Submenu position: Left, Right, Center or Full width. Submenu open style: Dropdown or Slideout. Submenu width (100–900 px), Padding inline, Padding block
Icon & text	Icon size, Submenu icon size, Main menu gap: text - icon, Submenu gap: text - icon
Advanced	Hide menu text (icons only), Hide submenu text, Hide submenu description

Typography

Set Font family, Font weight and Font size for Main menu, Submenu text and Submenu description. Use custom font works as described in Adjust Menu Font.

Colors

• Main menu color and Sub menu color: Text, Hover text, Icon, Hover icon, Background and Hover background colors.

• Other menu color: Description, Hover description and Divide colors.

Position

Turn the bar on for mobile (1) and desktop (2), then choose a position

1

Choose where the bar is shown

Turn on Display on mobile (1) and/or Display on desktop (2). Turn one off to hide the bar on that device.

2

Pick a position

Click one of the layouts under each toggle:

• Mobile: Bottom, Top, Center left, Center right, Bottom left or Bottom right.

• Desktop: Bottom center, Bottom left, Bottom right, Bottom full width, Center left or Center right.

3

Hide while scrolling (optional)

Tick Hide when scrolling down to hide the bar while the shopper scrolls down, so it doesn't cover content.

Advanced

Setting	What it does
Market availability	Shows the bar only in the markets you select. See Show Menus by Market.
Menu z-index	Stacking order. Raise it if other elements cover the bar; lower it if the bar covers popups.
Menu opacity	Transparency of the bar (0–100).
Bottom margin	Space between the bar and the bottom of the screen.
Stylesheet / CSS	Custom CSS for the bar.
JavaScript	Custom JavaScript for the bar.

If the bar overlaps another floating widget (chat, cookie banner), raise Bottom margin or adjust the Menu z-index in Advanced. You can also choose a different position in the Position tab.

---

Related Articles

Plans and BillingEnable App EmbedUpload Custom Icon for Menu ItemVersion History

---

💬 Need help?

Email us at 📧 [e-mail] - we’re happy to assist!