Main Website

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 Appearance module. 

Add items to your WordPress app

If you’ve chosen WordPress as your CMS type, navigate to Appearance > Bottom bar > Items. The following steps detail how to set up 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. You will see the following options:
    • Home – Opens the home screen of your app. 
    • Product Categories – Opens the Product Categories screen of your app.
    • Product Search – Opens the product search of your app. 
    • Post Categories – Opens the Post Categories screen of your app. 
    • Post Search – Opens the blog post search of your app.
    • Cart – Opens the cart of your app users. 
    • Profile – Opens the Profile settings screen of your app users. 
    • Settings – Opens the Settings screen of your app. 
    • 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. You can customize further by choosing whether you’d like to display the app header, website header, and website footer. Furthermore, you can choose to hide certain elements of the webpage by entering its HTML class or HTML ID.
    • 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.
    • Custom post types and taxonomies: You’ll be able to see all your WordPress site’s custom post types and taxonomies in the dropdown. This item will open your the custom post type or taxonomy you choose. You can manage the display of these screens via Post settings.
  • 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.
  • Add more than one item to your bottom bar. If you only have one item in your bottom bar, it will not be displayed in the app.

Add items to your webview app

If you’ve chosen Other as your CMS type, navigate to Appearance > Bottom bar > Items. The following steps detail how to set up 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. You will see the following options:
    • Settings– Opens the Settings screen of your app.
    • Webview – 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. You can customize further by choosing whether you’d like to display the app header, website header, and website footer. Furthermore, you can choose to hide certain elements of the webpage by entering its HTML class or HTML ID
  • 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.
  • Add more than one item to your bottom bar. If you only have one item in your bottom bar, it will not be displayed in the app.

Style your bottom bar

Navigate to Appearance > 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 when you’re finished.

Previous articleMenu
Next articlePages

Related Articles