You can create and manage your app’s Top and Bottom Bars in this panel. The Top Bar, also called the Action Bar, typically contains a back button to navigate to the previous screen, the screen’s title, and an optional third action. The Bottom Bar, also known as the Tab Bar, contains several buttons that allow users to quickly navigate between the main areas of the application.

Top Bar

You can create multiple Top Bars and then use them across different Layouts within your application.

Creating a New Top Bar

Click the “+ Top Bar" button to create a new Bar.

Editing a Top Bar

Click the more menu (three dots) on a Top Bar, and then click “Edit” to open the Top Bar Editor.

On the left size, note that you have options to customize the Top Bar Container itself, as well as Left Action, Center, and Right:

• The Top Bar lets you customize the container settings for the entire Top Bar. You can select a background color as well as tint color, which is the color of the icon buttons. You can also optionally select a Flow to run when the bar is initialized.
• The Left Action area lets you customize the back button. The button will take the user to the previously viewed screen. The color of the icon is controlled by the tint color setting in the Container properties. You can optionally add a label to the button. First, click on the “Show Label” toggle to enable the label. Then you can provide a label with the “Text” field and customize its font, font size, and accessibility options.
• The Center area lets you add an optional page title. By default, the title is disabled; you can add it by clicking the “+” icon next to the “Center” header. Once enabled, you can specify the title’s text as well as customize the font and other text display options.
• The Right area lets you add an optional right icon which links to a different Route. By default, this is disabled; you can add it by clicking the “+” icon next to the “Right” header. Once enabled, you can specify an icon and Route to use when tapped.

Deleting a Top Bar

1. Click on the more icon (three dots) in the desired Top Bar.
2. Click “Delete”.

Adding a Top Bar to a Layout

1. In Layouts mode, select a Layout in the Canvas
2. Click the Layout icon in the Right Panel
3. Enable the “Show Navigation Bar” toggle
4. Click on the desired Top Bar to use it for the current Layout

Bottom Bar

You can create multiple Bottom Bars for development purposes, but your app can only have one active Bottom Bar at a time.

Creating a New Bottom Bar

Click the “+ Bottom Bar” button to create a new bar.

Editing a Bottom Bar

Click the “More” icon (three dots) on a Bottom Bar, then click “Edit” to open the Bottom Bar Editor.

Ensure “Bottom Bar” is highlighted to edit the main container settings for the bar. You can customize the background color, active tint color (tab color when the tab is active), inactive tint color (tab color when the tab is not active), and accessibility settings.

To add a new Tab icon, click the “+” button next to the “Add Tab Item” label. You can create any number of Tabs, though Android and iOS will only show a maximum of five icons at a time.

For each Tab, you can customize the following options:

• Initial Route: The Layout that will be displayed when the tab loads.
• Icon: An image to be used as the tab icon. You can either upload an image directly or choose an existing image from the Asset Library. You cannot use a remote image URI for tab icons.
• Label: You can customize the text under the tab icon as well as the font family, weight, size, and text color.

Selecting an Active Bottom Bar

1. Click on the “More” icon (three dots) on the desired Bottom Bar.
2. Click “Set Global’.

Hiding the Bottom Bar on a Layout

By default, every Layout will display the Bottom Bar. You can hide the Bottom Bar from selected Layouts by doing the following

1. In Layouts Mode, select a Layout on the Canvas
2. Click the “Layout” icon in the Right Panel
3. Enable the “Hide bottom bar" toggle