Custom app bottom bar
Last updated
Last updated
The bottom bar in your Custom App is a vital navigation element that allows users to seamlessly navigate through your app. Follow this guide to configure or manage your bottom bar:
Step 1: Enable the Bottom Bar
Log in to your AppMySite dashboard.
Navigate to the Bottom Bar section.
Toggle Enable Bottom Bar to activate the bottom bar functionality.
To ensure your app functions and does not show a blank screen, it is mandatory that you keep the bottom bar enabled.
Step 2: Add Items to the Bottom Bar
Click on Add Item to customize your bottom bar. You can include the following options:
Menu: Adds a hamburger menu to your bottom bar. This menu provides quick access to various sections of your app.
Settings: Opens the Settings screen of your app.
Web View: Opens a web view interface within your app. Customize this option by:
Entering the website URL of the page you want to display.
Enabling or disabling the app header, website header, or website footer.
Hiding specific webpage elements by entering their HTML class or HTML ID in the Web View settings.
Pages: Displays any content from your app’s pages. Standard pages may include Home, About, or Contact pages.
Post: Displays all posts in your app. Posts are time-stamped articles, and the most recent posts appear first.
Post Categories: Opens a screen showing all post categories. You can choose a template to style the appearance of categories in your app.
Post Tags: Adds a tag screen for your posts, allowing users to find posts based on the tags you assign to them.
Menu - Select to add a hamburger menu in your bottom bar. A menu provides quick access for your app users to navigate through the app.
Settings -Opens the Settings screen of your app.
Web view -Opens a web view interface within your app. If 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 hide certain webpage elements by entering their HTML class or HTML ID in the Web view settings.
Pages -Display any content on pages. Examples of standard pages include Home, About, and Contact pages.
Post -Displays all posts on your bottom bar. A post is a time-stamped article organized through categories and tags. Most recent posts will appear first.
Post Categories -This opens the screen that displays all your posts' categories. You can choose a template to style the appearance of categories in your app.
Post tags -Choose to add the tag screen for your posts. This allows users to find your posts based on the tags you assign to them.
Step 3: Add Icons to the Bottom Bar
Assign icons to each item in your bottom bar.
You can upload custom icons for a personalized look.
Alternatively, select icons from the available icon library.
Ensure the icons align with your app’s design and navigation needs.
Step 4: Adjust and Customize the Bottom Bar
Default Button: Ensure that at least one default button remains active in the bottom bar for the app to remain functional.
Hide or Delete Buttons: To minimize the bottom bar’s visibility while maintaining app functionality:
Use the Hide button to make the bottom bar less visible.
Delete all buttons in the bottom bar except the default one.
Step 5: Preview in Simulator
Use the Simulator on the Bottom Bar screen to preview how the bottom bar will look and function in your app.
Adjust the settings as needed based on the preview.
Step 6: Save Your Changes
Once satisfied with your bottom bar configuration, click Save to finalize your settings.