# 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.**

{% hint style="info" %}
A full example setup on Bottom Navigation (combined with Visibility Group) is available in our [Showroom](https://showroom.appfarm.app/ui-components/bottom-navigation)! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

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](/library/ui-components/visibility-group.md)).

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!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appfarm.io/library/ui-components/bottom-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.