# Control Navigation Bar

{% embed url="<https://www.youtube.com/watch?v=5tX1cMOpm1g>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=5tX1cMOpm1g>

The **Control Navigation Bar** action allows you to programmatically control the navigation bar's selected index. This can be used to switch between tabs or navigation items dynamically based on user interactions or app logic.

{% hint style="warning" %}
This action only works when a navigation bar is present in the current UI. If no navigation bar exists, the action will have no effect.
{% endhint %}

***

#### 📦 Properties

| Property | Type                | Required | Description                                                                                                                        |
| -------- | ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `index`  | Expression (Number) | ✅        | The zero-based index of the navigation bar item to activate. Can be a static number or an expression that evaluates to an integer. |

#### ✅ Common Use Cases

* Programmatically switch the active tab based on user actions
* Synchronize navigation bar state with other components or events
* Control navigation from outside the navigation bar widget
* Implement custom navigation flows or deep linking

***

#### ⚙️ Default Behavior

By default:

| Behavior                    | Description                                                                         |
| --------------------------- | ----------------------------------------------------------------------------------- |
| **Index Validation**        | The `index` must evaluate to a valid integer (0-based)                              |
| **Navigation Bar Required** | Action only works if a navigation bar is present in the current UI                  |
| **Bounds Checking**         | If the index is out of range, the action may have no effect or clamp to valid range |
| **Visual Feedback**         | Navigation bar updates immediately to show the selected tab                         |
| **Event Triggering**        | May trigger navigation bar change events and associated actions                     |

***

#### 🛠️ How to Use

1. Add the action to a widget event (e.g., button tap, form submission)
2. Choose **Control Navigation Bar** from the action list
3. Set the `index` property to the desired navigation item (0-based)

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-f781b53c3888efed34f567e427e6b628b2deb5dd%2Fnav_bar_action.png?alt=media" alt="Call External Method action configuration showing message name and payload fields"><figcaption><p>Call External Method action configuration in Digia Studio</p></figcaption></figure>

***

#### 🔗 Related Documentation

* [Navigation Bar](https://docs.digia.tech/logic-and-interaction/actions/broken-reference) - Learn about navigation bar widgets
* [Navigation Bar Item](https://docs.digia.tech/logic-and-interaction/actions/broken-reference) - Individual navigation items
* [Set App State](https://docs.digia.tech/logic-and-interaction/actions/set-app-state) - Update app state that might control navigation
* [Control Drawer](https://github.com/Digia-Technology-Private-Limited/digiaDocs/blob/main/docs/actions/control-drawer.md) - Control other navigation elements

***

*Asset Placeholder: Tutorial video demonstrating navigation bar control in Digia Studio*