Skip to main content
All CollectionsDesign Your App
How To Build Navigation Menu Like A Pro?
How To Build Navigation Menu Like A Pro?

The navigation menu is the backbone of your app and it needs to be well structured. Here is how to build it!

Lara Soley avatar
Written by Lara Soley
Updated over a year ago

The shopping apps are intended to offer the easiest navigation and the simplest user experience on mobile devices. Therefore, the menu of your app is crucial because it is the spot where your customers will look when they want to navigate to a specific page in your app or when they feel a bit lost. It should include the most likely needed shortcuts that your customers might be looking for and guide them properly within your app.

In this article, you will find detailed explanation on the menu features of Shopney and some pro tips to make your menu satisfy your customers' needs.

IMPORTANT NOTE: We suggest you to learn the basics of the menu section of the Shopney dashboard before the details. So, you should check the following article if you haven't yet:


The Menu Item Types and The Way They Function

There are different type of menu items for different purposes. In the following section, you will learn each in details and how to configure them properly for your mobile app.

1. Showcase

Showcase (Home Page) item opens the mobile app home page every it gets tapped. This item is ready to use with basic name and icon configuration.



2. Wishlist

Wishlist is the menu item that displays the products that are wishlisted (added to favorite) by tapping on the ❤️ (heart) icon. When you put this item to your menu, your customers can see their favorite products with just one tap and purchase them easily. This item is ready to use with basic name and icon configuration.

3. Recently Viewed

As the name indicates, this item displays the products as a list that the mobile app user checked before they tap on the item. This item is ready to use with basic name and icon configuration.

4. Cart

This item displays the cart and the products added to cart. If you keep the cart icon on the top navigation bar of your app, you may not need this as it will function the same with that. This item is ready to use with basic name and icon configuration.

5. My Orders

With this item, the mobile app users can see the list of products that they purchased earlier. This item is ready to use with basic name and icon configuration.

6. All Products

This item displays the entire Shopney-available inventory of your store in the given order. It is ready to use with basic name and icon configuration.

7. Web URL

Although you want to keep your customers on your mobile app, you may still want to drive traffic to a landing page on your store or another website for extra information. With this item, your customers can open a web page within the mobile app with just one tap. All you need to do is to make the basic configuration and inserting the web link from the menu item configuration panel on the right-hand side.

8. Notifcations

Notifications item opens the list of push notifications that your customers received so far. They can browse the list and navigate to the collections or products if they are still available. This item is ready to use with basic name and icon configuration.

9. In-App Messages

With this item, your customers can open the in-app live chat and start a conversation. Just like the Cart item, If you keep the message icon on the top navigation bar of your app, you may not need this as it will function the same with that. This item is ready to use with basic name and icon configuration.

10. Search

This item is functioning the same way as the search bar on your mobile app showcase (home page). Search item is also ready to use with basic name and icon configuration.

11. Sub-Collections

This item enables you to create a collection branches ( i.e. MEN > SPRING > TOPS > T-SHIRTS) on your menu. So, your customers navigate the collections easier and decide to buy quicker. This item requires further configuration to use. You can find it below.

How To Configure Sub-Collection Item?

A. Select The Collections To Create The Branch: Once you add this item to your menu, click on the 'Customize Sub-Collections' button that will appear on your right. After you click on it, you will be directed to a pop-up page in which you can select the sub-collections.

B: Configure The Collections Hierarchy: The selected collections (sub-collections) will appear on your right. By dragging the sub-collections, you can change their order.

You can even create sub-collections under sub-collections as shown below!

C. Select The Sub-Collection Display Type: Now that you have an idea of what your sub-collections will look like, it is now time to decide on the best display type. Below you can see how each type will display your sub-collections.

You can also change the display type of the sub-collections from the configuration section designated below.

Each 'display type' has its own specific layout. While you will need collection images to fully use Type 1, Type 2, and Type 4; you will not need collection images to use Type 3 if you do not have them. By that, your collection will be displayed only with the title in the middle.

12. My Account

My Account item serves as a summary of your customer’s data and profile. It includes, ‘favorites’, ‘recently viewed items’, ‘orders’, ‘addresses’ and ‘account info’. Rather than including favorites, recently viewed items, and orders as separate items on the menu, it is possible to combine them all under the ‘My Account’ item.

Shopney, my account, Shopify's mobile app builder

Once you drag&drop the item, it is ready to use with basic name and icon configuration.

13. Collapsable Menu

A Collapsable Menu is a sub-menu tool that can contain some secondary pages like blogs, policies, etc. You can add it easily by drag & drop as the other items. Once you add, you need to click on the item open the area to put the collapsable items in as shown below.

Then, you cannot add any menu item as sub-elements to the Collapsable Menu.

You can use Web URL item, the items from Pages, Blogs and Collapsable Menu item. So you can create collapsable menu in collapsable menu as shown below.

QUICK NOTE: Pages & Blogs are opened in a web view within the app.

PRO TIPS FOR BUILDING A GREAT MOBILE APP MENU

1. Keep It Functional But Simple

We recommend you keep your menu as simple as possible and avoid adding too many items to it. Otherwise, your menu will be confusing itself rather than guiding your customers. They need to find just what they might look for. Nothing more than that.

2. Create Proper Hierarchy In Left Panel Menu Style

When you select the left panel menu style, the top section of your menu will be in the limelight. And the bottom part will be drawing less attention statistically, especially if you have more items than 6-7. So, you need to keep that in mind while placing the items.

3. Keep The Most Important Items In Top For In Bottom Bar Menu Style

Remember, only top 4 items on your main menu will be displayed on the bottom bar. The rest will be hidden under hamburger icon (named others) on the right-hand side as shown.

So, you should keep the most effective and used items on top 4 to provide a great mobile app user experience.

4. Make Sure Your New Sub-Collections Are In Line With Others

When you add a new collection to your sub-collection tree, make sure its collection image is existing and matching the other collections for visual continuity.


IMPORTANT NOTE

The menu item (page) on top is always the opening page of your app. So, you need to keep Showcase the page you design on top.



For further information, please feel free to contact Shopney Support Team.

You are always more than welcome with any questions or concerns. Our support team will be glad to answer them, and help you with anything!

Thanks for reading!

Did this answer your question?