# 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](/how-tos/layout-and-navigation/read-query-params-from-url.md)

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="/files/YLhkHRlMLM0pfxQkO6Pf" 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="/files/oIX5mpeoO9yTYyxxmX1f" alt=""><figcaption></figcaption></figure>

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

{% content-ref url="/pages/ToKwj1S2RuVfJM4d0537" %}
[Reusable header](/reference/working-with-components/reusable-header.md)
{% endcontent-ref %}

{% content-ref url="/pages/XylC1MLrdSUo0TyQhUJz" %}
[Reusable sidebar](/reference/working-with-components/reusable-sidebar.md)
{% 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>" %}


---

# 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.uibakery.io/how-tos/layout-and-navigation/add-navigation-to-application.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.