Bottom navigation

This article will cover steps that you can follow to customise the bottom navigation menu of your app. The process can be broadly divided into two steps: selecting the items and designing the item icons and menu. Navigate to Bottom Navigation in the App Settings module. 

Items

Navigate to Settings > Bottom Navigation > Items. The following steps detail how to setup your navigation menu in the Item tab:

  • Select Add item. 
  • You will now see a pop up screen for a new item. 
  • Enter the name of your menu item. The limit for the item name is 10 characters. 
  • Select your item type. This choice will determine the app screen users will be redirected to when they select this item. You can choose from the following options:
  1. Home – Opens the home screen of your app. 
  2. Product Categories – Opens the Product Categories screen of your app.
  3. Product Search – Opens the product search of your app. 
  4. Post Categories – Opens the Post Categories screen of your app. 
  5. Post Search – Opens the blog post search of your app.
  6. Cart – Opens the cart of your app users. 
  7. Profile – Opens the Profile settings screen of your app users. 
  8. Settings – Opens the Settings screen of your app. 
  9. Web View – Opens a web view interface within your app. In case you choose this option, you can enter the website URL of the page you wish to render. 
  10. Pages – Opens a grid of all the pages you have already chosen for your app home screen. You can manage the page display in the Home Screen section in the Appearance module.
  • Select an icon for your menu item. You can choose an icon from the AppMySite library. Use the search option to look for an icon that suits your menu item. 
  • Click on Add to add the item to the menu. 
  • Similarly, you can add more items to your bottom navigation menu. AppMySite enables you to add up to five items to the bottom menu. 
  • You can manage the item details by clicking on Settings in the item list. In case you wish to deactivate an item, turn off the corresponding toggle. You can also drag menu items up or down to change their order in the bottom navigation bar.

Style

Navigate to Settings > Bottom Navigation > Style. Follow the steps below to design your bottom navigation menu:

  • Go to the Style tab on the Bottom Navigation screen. 
  • Select a color for your bottom navigation menu. 
  • Set a color for the border of your bottom navigation menu. 
  • Choose a color for your menu items. 
  • Select a color for the selected item in your bottom navigation menu. The color will be reflected when the user has chosen an item from the bottom menu. 

Click on Save to finalize the settings and enable bottom bar navigation on your app.