Adding Secondary Navigation to Your App
Secondary navigation menus are essential for enhancing user experience by providing quick and efficient access to additional features and content within an app. This guide will walk you through the steps to add and customize a secondary navigation menu in your app.
Key Features of Secondary Navigation:
-
Enhanced User Experience:
- Secondary navigation menus improve usability by offering easy access to various features and sections of the app.
-
Positioning:
- The secondary navigation menu appears at the bottom of the screen, just above the bottom navigation bar, if configured.
-
Expanded View:
- Adding more than three links will enable an expanded view, providing better detail and visibility with icons.
Step-by-Step Guide to Adding Secondary Navigation:
Add Secondary Navigation Add-on:
- Navigate to Add-ons: Open the app builder and go to the Add-ons section.
- Add to Cart: Find the Secondary Navigation add-on and add it to your cart.
Access Settings:
- Edit Navigation: After adding the add-on, you will see the option to edit your navigation in the left-side panel.
- Open Settings: Click on Secondary Navigation, then click on Add Menu Items to start customizing your navigation.
Customize Navigation Items:
- Add Items: Click Add Item to upload an image, enter a label, and provide the URL for each navigation item.
- Add More Items: You can add additional items by clicking on Add Another Item.
Customize Appearance:
- Text and Background Color: Adjust the text color, background color, and button margin to match your app's design.
- Real-Time Preview: All changes can be viewed in real-time to ensure the navigation looks exactly how you want.
Configuration:
- 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 Changes: Save your configuration.
Rebuild the App:
- Apply Changes: Rebuild your app to apply the changes. This will ensure that the new secondary navigation is functional and visible in your app.
Demo:
