Bottom bar settings

How to customise the settings of the bottom bar?

The Bottom Bar and Bottom Menu play a key role in your app’s navigation. With the advanced settings, you can fully customize their appearance to align with your branding and user experience goals. Follow this guide to configure these elements to your preference:

Access Bottom Bar/Menu Settings

• Log in to your AppMySite account.

• Navigate to Navigation > Bottom Bar to access the customization options.

Customize the appearance

• Background color – Select a background color to match your app’s theme.

• Border color – Choose a border color to outline the Bottom Bar.

• Icon color – Set a color for the icons in the Bottom Bar.

The icon color setting will only apply if all icons selected from the icon library are black and solid.

• Selected icon color – Define the color of an icon when it is selected.

• Text color – Customize the text color for items in the Bottom Bar.

• Selected text color – Choose the color for selected text in the Bottom Bar.

Adjust Visibility Settings

• Show text – Enable to display item names in the Bottom Bar.

• Show icon – Enable to show icons alongside text in the Bottom Bar.

Configure Menu Options

• Menu text – Enter a label for the menu button (e.g., "More") that allows users to open the Bottom Menu.

• Menu icon – Select an icon that users will click to access the Bottom Menu.

Customize the Bottom Menu Appearance

• Show grid view – Enable to display items in a grid format instead of a list.

• Show icons – Enable to display icons for menu items.

• Show text – Choose whether to display item names in the Bottom Menu.

Adjust Layout and Styling

• Tile shape – Select the shape of tiles in the Bottom Menu.

• Columns (Adjustable value) – Modify the number of columns using arrows.

• Icon color – Define the icon color (works only if icons are solid black).

• Text color – Customize the text color of Bottom Menu items.

• Tile background color – Set the background color for menu tiles.

• Tile border color – Select a color for the tile borders.

• Selected icon color – Choose a color for icons when selected (works only if icons are black).

• Selected text color – Define the text color of the selected menu item.

• Selected tile background color – Set the background color for selected tiles.

• Selected tile border color – Choose a border color for selected tiles.

• Background color – Customize the overall Bottom Menu background color.

• Page background color – Adjust the page background color for the Bottom Menu screen.

Enable Haptic Feedback

• Haptic vibration on touch – Enable to provide subtle vibration feedback when users interact with the Bottom Menu, enhancing the user experience.

Once all settings are adjusted, click Save to finalize your customizations.