How to use?

Tab Bar - as known as Bottom Navigation Bar, Bottom Nav, or Tab Navigation - is a modern navigation style used by global brands like Shein, ASOS, Zara, Etsy, H\&M, Nike, and Uniqlo to enhance mobile user experience. It works well for websites of all sizes and is effective on both mobile and desktop.

Key Benefits:

  • Places important links within easy reach for quick, convenient access
  • Centralizes key navigation, helping users and search engines better understand your site – great for SEO
  • Delivers a modern, professional look that follows current UX and mobile-friendly design trends
  • Stays visible across all pages, so customers never miss key links like promos, trending products, or membership offers

FAQ:

1. I haven’t decided whether to use the free or paid version. Can I try the professional menu templates?

Absolutely! The menu groups are mainly to help beginners avoid feeling overwhelmed by advanced features in Navi+ 😄.\ The best way is to try out the professional menus to explore all features and layout options. Later, you can simply delete any menu you don’t need or find unsuitable.

2. Does creating a menu here make it show up on my website right away?

Not yet. You’ll need to publish the correct menu for it to appear on your website. Don’t worry — it’s easy!

3. What if I choose the wrong template or make a mistake?

No problem at all. You can delete it and create a new one anytime.\ If you're testing a menu and want to try another template, you can save the current one as a backup file and re-open it later.\ You can even copy and paste parts between menus (by opening two browser tabs) to keep your previous work. Feel free to experiment!

4. Should I create just one menu or multiple?

You should create multiple menus.\ Only the active menu will show on your site, but you can prepare many versions — by selecting different templates or cloning menus.\ Menus can be configured to show/hide based on page type (home, product, collection...), device (mobile or desktop), or URL keywords.\ So go ahead and build menus that fit each situation!

Step 1: Edit the menu tree

1.1. Understanding the Menu Tree

The menu tree is the most important part of any menu—it defines the structure.

Here’s an example of a menu tree:

Home  
Catalog 
- All Mountain  
   - Cruise Flex  
   - Balance Ride
- Freestyle  
   - Park Board  
   - Jib Board  
- Freeride  
Support  
More

This is a 3-level menu tree. Level 1 includes Home, Catalog, Support and More.
All-Mountain is a level 2 menu item, with two child items: Cruise Flex and Balance Ride.

You’ll spend most of your time building this menu tree for your website, helping customers find the content they’re looking for.

Catalog: A level 1 menu item, displayed as a tab on the tab bar. All-Mountain: Level 2 menu item that appears when you tap on Catalog.
Cruise Flex, Balance Ride: Level 3 menu item that appears when you tap on All-Mountain.

1.2. Basic Interactions with the Menu Tree

You can drag and drop menu items up and down or left and right to change their position and parent-child relationships in the menu tree.

When you hover over any menu item, you’ll see additional options: edit the item’s details, delete it from the menu tree, or copy and paste it elsewhere.

Tip: You can copy a menu item from one menu to another by opening the Navi+ app in two browser tabs.

1.3. IMPORTANT! Delete the sample menu items and keep only the structure you want.

This is a common situation when creating a menu with Navi+. When you create a new menu, we include a full example with popular menu items to show layout ideas and let you copy/paste as needed. However, if you’re new to Navi+ and using the Starter plan, you’ll see many red (i) warnings for features that are not available, such as uploading images or using advanced interactions.

If you like these advanced features, consider upgrading to a Business or Elite plan. But if you want to continue with the Starter plan, please find and delete the menu items with red (i) warnings.

Important Tip: When the delete confirmation appears, turn on “Don’t ask again next time” to delete faster.

1.4. Add menu items to the Menu Tree

To add a menu item, you have two options:

Option 1 **(Not recommended if you're new to Navi+)**: Click “Add menu” to insert a blank menu item at the end of the menu tree. This method requires a good understanding of menu item settings, which we’ll cover below. It might feel overwhelming at first, so you can explore this later.

Option 2 (Recommended): We’ve already prepared many well-designed menu item templates for you. Simply copy and paste them into the right place. After finishing your menu tree, just delete the unused templates.