# Custom sidebar menu

Ubidots offers two ways for users to navigate an application:

* A fixed top navigation bar
* A customizable left navigation bar, also known as a "sidebar"

These options are available in the "App builder" section of your [apps](https://industrial.ubidots.com/app/apps/), as shown below:

<figure><img src="/files/pUaajDGaVmKehktizB9S" alt=""><figcaption></figcaption></figure>

### Top Navbar

This is how an application looks with a top navbar:

<figure><img src="/files/lIZwHdXXZ5cNC4pZRe5p" alt=""><figcaption></figcaption></figure>

### Left Navbar

This is how an application looks with a left navbar:

<figure><img src="/files/b8M3kdLOGHkfDEhD9p8e" alt=""><figcaption></figcaption></figure>

In the latter case, you can collapse the bar to free up space on the rest of the page:

<figure><img src="/files/WRnWL9u9bkhrTpWJ1Wnp" alt=""><figcaption></figcaption></figure>

## Overview

When you select "Left navbar" as the navigation menu style, you can choose from two options:

* **Default**
* **Custom**, which enables the "Navigation menu" option

<figure><img src="/files/G1BFypekg43gdJ7deTLA" alt=""><figcaption></figcaption></figure>

The "Default" option renders a fixed left sidebar with Ubidots' standard menu layout in the app. End users see options based on their [roles and permissions](https://help.ubidots.com/en/articles/2218051-user-management-roles).

<figure><img src="/files/iABnvGIvisZvKvdKpQJA" alt=""><figcaption></figcaption></figure>

### Custom

When you select the "Custom" option, you can customize the sidebar freely. In the example below, the menus, labels, icons, and dropdowns have been changed:

<figure><img src="/files/cqgYH0EOqWBY7IlQDCLk" alt=""><figcaption></figcaption></figure>

The sidebar also supports opening a secondary panel, called "asidepanel", from either a direct link or a menu item in the sidebar. This asidepanel can be static or load dynamic, user-aware content from an HTTP request.

<figure><img src="/files/XuxVfYUe3PAwE44YKHUj" alt=""><figcaption></figcaption></figure>

You can do this through the "Edit menu" button, which opens an XML editor with a preview so you can see how the XML renders:

<figure><img src="/files/4xQObbicE9fZm4ry9Lop" alt=""><figcaption></figcaption></figure>

This is the XML that creates the custom sidebar seen above:

```xml
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V2.0//EN' "-">
<tree>
  <asidepanel 
    id="jsonpath-all-objects"
    source="/api/v2.0/dashboards"
    query="$.results[*]"
    label="$.name"
    path="/app/dashboards/{$.id}"
    permissions="ubi_dashboards.view_dashboardpg"/>
  <body>
    <section text="">
      <link 
        path="/app/dashboards/" 
        permissions="ubi_datasource.view_devicegroup" 
        icon="home" 
        label="Home" 
        iconFaType="duotone" 
        exact="true"/>
      <link 
        path="/app/dashboards/68c056ffe40f2600103af3ec/layers/68c056ffe40f2600103af3ed" 
        permissions="ubi_datasource.view_devicegroup" 
        icon="industry-windows" 
        label="Production" 
        iconFaType="duotone" 
        exact="true"/>
      <link
        path="/app/dashboards/"
        permissions="ubi_datasource.view_devicegroup" 
        icon="chart-line-down" 
        label="Losses" 
        iconFaType="duotone" 
        exact="true"/>
      <menu defaultShow="true" icon="gear" label="Settings" iconFaType="duotone">
        <item 
          path="/app/devices" 
          permissions="ubi_datasource.view_device" 
          label="Datasources"/>
        <item 
          panelTarget="jsonpath-all-objects" 
          permissions="ubi_datasource.view_devicegroup" 
          label="Custom dashboards"/>
      </menu>
    </section>
  </body>
</tree>
```

## Migration from v1 to v2

{% hint style="success" %}
**Contact support**

To migrate your XML v1 (deprecated in favor of v2) to v2, please contact us at <support@ubidots.com>.
{% endhint %}


---

# 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://dev.ubidots.com/apps/custom-sidebar.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.
