Bottom navigation

Bottom Navigation is typically used for mobile navigational menu.

Bottom navigation may be seen as "tabs" at the bottom level of a mobile app.

Note: If you know how to set up Tabs - setting up Bottom Navigation is following the exact same principles.

A full example setup on Bottom Navigation (combined with Visibility Group) is available in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

The Bottom Navigation has a few settings.

Active Destination

When the user clicks the items/destinations added to the bottom navigation, the information on which one was clicked needs to be stored somewhere.

The Bottom Navigation UI component itself does not hold the content to be displayed when the user clicks the items/destinations. It only holds

• Which destination was clicked (stored in Active Destination)

• Which destinations are available (explained further down)

So, you need a variable to hold this information (which item/destination was clicked).

1. Add a variable to your App variables (the built-in data source found in the App Data menu). It would typically be an integer data type. Example: Name the property Active navigation value and set the default value to 0.

2. Active Destination: Select Data Binding and select the property you added in 1).

Destinations

Add an item, or two, or three.

• Label: The visible name for the item/destination.

• Icon: If you want an icon above the label.

• Destination value: Automatically set. This is the value to write back to, to property bound in "Active Destination" when this item is clicked.

Combining the Bottom Navigation with the rest of your UI

An example with 2 destinations: Orders and Invoices, the value 0 or 1 is saved into App variables.Active navigation value property when either Orders or Invoices are clicked.

We simply need to control what should be visible depending on this value.

You could add 2 containers, one being visible if App variables.Active navigation value is 0, and another if 1. But let us do something smarter.

The best way to do it is to add a Visibility Group (also documented here).

A Visibility Group with Control Mode Controlled may have a Visible Index. Select the same property here as in the Active Destination (e.g. App variables.Active navigation value).

You may add 2 containers inside the Visibility Group, the first is recognized as index 0, and the second as index 1, etc.

When the property bound in Visible Index changes, e.g. from 0 to 1, the second container will be displayed - since it is located at index 1 inside the Visibility Group!