Adding a Bottom Navigation Tab

Enhance your app's user experience by adding a bottom navigation tab, providing users with quick access to important sections. Follow these comprehensive steps to add and customize a bottom navigation tab effectively:

Step-by-Step Guide:

Add Bottom Navigation Tab:

• Navigate to Add-ons: Open the app builder and go to the Add-ons section.

• Add to Cart: Find the Bottom Navigation Tab add-on and add it to your cart.

• Access Settings: Once added, you will see a settings option for customizing your navigation tab. This option will also appear on the left-side panel for easy access.

Customize Your Navigation Tab:

• Go to Settings: Click on Settings to begin editing your navigation tab.

• Add Tab Menu: Click the Add Tab Menu button to open the edit box.

Edit Tab Menu:

• Select Icon: Choose an icon for your tab from the provided options.

• Label: Enter a label for the tab, such as "Home," "Search," or "Profile."

• URL Link: Provide the URL link for the tab item, directing users to the desired section of your app.

Add More Tab Items:

• Add Additional Tabs: To add more tab items, click on the + sign.

• Repeat Process: For each additional tab item, repeat the steps of selecting an icon, providing a label, and entering a URL link.

Adjust Colors:

• Icon Color: Set the color of the icons to match your app's theme.

• Text Color: Choose a text color that ensures readability against the background.

• Background Color: Set the background color of the navigation tab to complement your app’s design.

Configure Display Settings:

• Next Step: Click the Next button to proceed.
• Select Display Scope: Choose where you want to display the navigation tab:

• All pages: Show the navigation tab on all screens of your app.
• Exact URL: Modify the component to display the bottom navigation only on exact URL matches.
• Start with URL: Extend the logic to show the bottom navigation on pages that start with specified URL prefixes.

Save and Rebuild:

• Save Changes: After customizing your settings, click the Save button.

• Rebuild App: Rebuild your app to apply and view the changes. The rebuild process may take a few minutes, depending on the complexity of your app.

Example Configuration:

1. Tab 1:

   • Icon: Home
   • Label: Home
   • URL Link: https://yourwebsite.com/home
   • Icon Color: #FFFFFF
   • Text Color: #000000
   • Background Color: #F8F8F8

2. Tab 2:

   • Icon: Search
   • Label: Search
   • URL Link: https://yourwebsite.com/search
   • Icon Color: #FFFFFF
   • Text Color: #000000
   • Background Color: #F8F8F8

3. Tab 3:

   • Icon: Profile
   • Label: Profile
   • URL Link: https://yourwebsite.com/profile
   • Icon Color: #FFFFFF
   • Text Color: #000000
   • Background Color: #F8F8F8

Tips for Optimization:

• Consistency: Ensure consistent icon and text styles across all tabs for a cohesive look.
• Usability: Place the most important sections of your app in the navigation tabs to enhance accessibility.
• Testing: Test the navigation tabs on different devices and screen sizes to ensure compatibility and responsiveness.
• User Feedback: Gather feedback from users to identify any usability issues and make necessary adjustments.