Navi+ has 6 menu types, each in a different spot on your store. Look at the pictures below to see what each type looks like, then choose the one to build first.
What do the 6 menu types look like?
These are the exact names of each type in the app. If you know them by other names, see the reference table right below.
Where does each type show, and when should you use it?
| Menu type | Where it shows | Device | When to use it |
|---|---|---|---|
| Tab Bar | A fixed tab bar at the bottom of the screen | Phones, can also be turned on for desktops | Pin 4–5 main pages such as Home, Shop and Cart within the shopper’s thumb reach |
| Mobile Menu | A menu drawer that slides out from the edge of the screen when shoppers tap ☰ | Phones | Holds your store’s whole category list, with no limit on menu items |
| Desktop Mega Menu | A large multi-column menu that drops down right under the header | Desktops | Stores with many categories that need to show images and featured products |
| Mobile Mega Menu | A horizontal category bar right under the header | Phones | Shows main categories outright, so shoppers can tap them without opening ☰ |
| Icon Menu | A grid of icon or image tiles placed in one area of the page | Phones and desktops | Place it on the home page so shoppers see what the store sells as soon as they arrive |
| Floating Button | A floating button in the corner of the screen; tapping it fans out contact buttons | Phones and desktops | Gathers WhatsApp, chat and phone calls into one compact button in the corner |
You may have heard some older names: a “hamburger” or “drawer” menu is the Mobile Menu, “bottom bar” is the Tab Bar, “grid” is the Icon Menu, and “FAB” is the Floating Button. These guides use the 6 names in the table above to match the app’s interface.
Each type is put on the store in a different way:
- The Tab Bar and Floating Button only need you to click Turn on to show on the store.
- The Mobile Menu needs an open button added, usually the ☰ button at the top of the page.
- The Desktop Mega Menu, Mobile Mega Menu and Icon Menu need to be placed in a specific spot on the page.
See how each type is placed in Where each menu shows on your store.
Which menu should you build first?
Most store owners follow these 3 steps:
- Build the Tab Bar and Mobile Menu for phones first. Most shoppers buy on their phones. The Tab Bar pins your key pages at the bottom of the screen, and you can set one of its tabs to open the Mobile Menu, which holds everything else.
- Build the Desktop Mega Menu for desktops. It’s the biggest menu you build, with categories in columns and images. Once it’s done, you can embed it into the Mobile Menu, so later you only edit it in one place.
- Add an Icon Menu or a Floating Button when you need one. An Icon Menu suits a home page where shoppers don’t yet know where to click. A Floating Button suits a store with several contact channels to group together.
Still not sure which type to choose? In the Add menu window, look for the line Not sure which type fits your store? and click the Get advice button. The app suggests a menu type that fits your store’s situation.
Can you use several menus at once?
Menus work independently of each other. Build one menu, publish it on your store, and add others whenever you like. A store often runs several menus at the same time, for example a Tab Bar, a Mobile Menu and a Desktop Mega Menu together.
See how to build this set of three in Case study: one menu tree for Mega Menu, Mobile Menu and Tab Bar.
If you want each menu to show only where you choose, such as only on phones or only on the home page, use display rules as well.
You can build as many menus as you like. The number of menus that can be shown on your store at the same time depends on your plan. See Plans and billing.
Try it on the demo store
You can open Navi+’s demo store to tap through each menu type on desktop or on phone.
When you’ve chosen the type to build, open its guide in the Create each menu type section.
Other platforms
The steps above are for Shopify — the default way.
All six types work on Wix. The difference is in how the menu is placed on the page; see Navi+ on Wix, WordPress and other websites.
All six types work on WordPress and other websites. The difference is in how Navi+ is attached and where the menu is placed; see Navi+ on Wix, WordPress and other websites.