Bottom Navigational Tab

Enhance your app with a customizable bottom tab bar. You can display it across all pages or specific ones to improve navigation and user experience. It is perfect for streamlined app interfaces.

Follow these comprehensive steps to add and customize a bottom navigation tab effectively:

1. Enable Buttom Navigation

2. + Add Bottom Navigation Tab: Click on "+ Add Buttom nav bar" to go further in creating your customizsed botton navigational bar.

3. Navigation Bar Menu Items

• 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 Tabs

4. 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.

Click on the "Next" button to proceed.

5. Configure Display Settings:

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.

After customizing your Navigational Tab, click on the "Save" button. 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

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.