# Adding navigation to application

UI Bakery supports both [in-app](#in-app-navigation) and [external](#external-navigation) navigation. In this article, we'll explore these options in more details.

## In-App Navigation

There are a number of ways to configure navigation inside the application:

* [Using the Menu component](#navigation-using-menu-component)
* [Using global app header/sidebar](#navigation-using-global-app-header-sidebar)
* [Using the **Link/Button** component](#navigation-using-link-and-button-components)
* [Using the **Navigation** action step](https://docs.uibakery.io/how-tos/layout-and-navigation/read-query-params-from-url)

You can configure navigation both to an **internal** application page as well as to an **external** website.

### Navigation using Menu component

You can configure navigation using the **Menu** and **Horizontal menu** components. 

To do so, simply add the component to the working area. In its *Items* property resource selector, your existing app pages will be selected by default. You can add more pages to the app, select custom icons for them, and edit existing ones - all changes will be synced instantly. 

If you need a manual setup, you can switch to the JS mode and map the *{{app.menuItems}}* to configure the Menu exactly how you want it.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Fd7jFEsmAczuPHOQIUGns%2FCleanShot%202025-03-20%20at%2019.25.47%402x-min.png?alt=media&#x26;token=4ebdaf30-ce25-4405-b076-2b2e3f10b7d5" alt=""><figcaption></figcaption></figure>

You can also add an item to your menu that will [redirect users to an **external link**](#use-case-menu-item-redirect).

### Navigation using global app header/sidebar&#x20;

Another way to configure custom navigation in the app is by using our *reusable header* and *sidebar* options. You can select either of them in the right side panel, place a Menu component inside, and that's it. You don't have to add them to each page separately since they save their state across all app pages.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Fy2UDNmdanFw5fx1PhADs%2FCleanShot%202025-02-25%20at%2017.20.02%402x-min-min.png?alt=media&#x26;token=38450d56-04a9-4c28-86de-3e7b42d5c879" alt=""><figcaption></figcaption></figure>

Check out the pages below to learn more:point\_down:

{% content-ref url="../../reference/working-with-components/reusable-header" %}
[reusable-header](https://docs.uibakery.io/reference/working-with-components/reusable-header)
{% endcontent-ref %}

{% content-ref url="../../reference/working-with-components/reusable-sidebar" %}
[reusable-sidebar](https://docs.uibakery.io/reference/working-with-components/reusable-sidebar)
{% endcontent-ref %}

### Navigation using Link & Button components

When using **Link** or **Button** components, you can pass dynamic parameters to a Detail page configuring the **Query params** property of the component. As an example, we'll review the case when you want to display the selected object on a child page on button click.

Check out the instruction below:point\_down:

As a prerequisite, you already have a **Table** and **Button** components added to your working area.

1. First, navigate to the **Pages** tab in the left side panel and create a new page (we'll name it *Customer* since it will display customer details).
2. Add a **Detail** component on this page to display customer details.
3. Now, go back to the *Home* page, select the **Button** component and set the *Customer* page as the URL in the right side panel.
4. Next, in the **Query params** property, switch to *JS mode* and configure the primary key of the object:

```javascript
{
  id: {{ui.customersTable.selectedRow.data.customer_id}}
}
```

In our example, the currently selected customer id will be sent as an **id** query parameter to the *Customer* page.

3. Next, create a new action of the **Load Row** type for your current Table.
4. In the *Filters* section, for *customer\_id* specify the following variable to receive the **URL query parameter** on the child page:

`{{activeRoute.queryParams.id}}`

5. Assign the *Load Row* action to the Detail component on the Customer page.

That's it! Now, if you select a row in the Table and then click the **Show customer** button, you will navigate to the child page with the selected customer displayed in the Detail component.

{% @arcade/embed flowId="ccxu1usQdj3qvXsa2zeE" url="<https://app.arcade.software/share/ccxu1usQdj3qvXsa2zeE>" %}

## External navigation

External navigation can be also configured using components like Button, Menu, etc. Here, we'll review two use cases of configuring redirect to an external page.

### Use case: Redirect following a trigger

1. Add a **Button** component to your working area.
2. Create a **JavaScript Code** action and specify the following code adding your external link:

```javascript
const a = document.createElement('a');
a.href = 'https://google.com';
a.target = '_top';
a.click();
```

or the following code to open the link in a **new tab**:

```javascript
window.open('https://google.com');
return 1;
```

3. Assign this action to the button's **On Click** trigger.

{% hint style="warning" %}
Please be aware that when running this code on certain browsers, you may get a **Blocked popup** warning message. This is especially likely to occur when the code is executed using the **Execute action** button. \
However, if the code is executed as a result of user interaction (e.g. button click), it should function correctly.
{% endhint %}

### Use case: Menu item external redirect

1. Select your Menu component and switch to *JS mode* in the **Items** property.
2. Now, modify this property and add a new item that will redirect to an external page:

```javascript
{
    title: 'Documents',
    link: '/docs'
  }
```

3. Next, navigate to the **Triggers** section of the component and create a new action for the *On Item Click* trigger.
4. Select a **JavaScript Code** action step and add the following code:

```javascript
if (data.link === '/docs') {
	window.open('https://docs.uibakery.io/');
}
return {{data}}
```

{% hint style="info" %}
In this code, we use *UI Bakery Docs* as an example. Replace the URL with the one you want to open on clicking the new menu item.
{% endhint %}

Now, when clicking the new menu item, the external link will open in a **new** tab.

5. **(Optional)** If you want the external link to open in the **same** tab, you need to add the `'_parent`' parameter to the following function:

```javascript
window.open('https://docs.uibakery.io/', '_parent')
```

{% @arcade/embed flowId="jQkD79J3aTXhnwQU3ET7" url="<https://app.arcade.software/share/jQkD79J3aTXhnwQU3ET7>" %}