# Custom sidebar menu

Ubidots offers two ways in which users are able to navigate an application. It can be with either:

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

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

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FI79hzjGh9Ab20CHZXa4t%2FApp%20builder.png?alt=media&#x26;token=c0719be1-a932-4fdb-9e20-39fabc39a9fc" alt=""><figcaption></figcaption></figure>

### Top Navbar

This is how an application looks like with a Top navbar:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FMdw6XcNNwzkoobO0NXMa%2FTop%20navbar.png?alt=media&#x26;token=7974f374-e3f4-47f0-8dfb-3421bcd0f39f" alt=""><figcaption></figcaption></figure>

### Left Navbar

This is how an application looks like with a Left navbar:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2Fgk4A6CSdxDfxBk8VODTI%2FSidebar.png?alt=media&#x26;token=94f4796e-230f-412d-a3ad-3e5d989d34cd" alt=""><figcaption></figcaption></figure>

It's worth noting that in the latter case the bar can be collapsed to gain space in the rest of the page:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FfQjBaXOEajSyU5MG2dX5%2FSidebar%20collapse.png?alt=media&#x26;token=328d0d4c-0670-4a7a-b4fa-d4f2b0a93313" alt=""><figcaption></figcaption></figure>

## Overview

When selecting "Left navbar" as the navigation menu style, you'll be able to choose from 2 options:

* **Default**
* **Custom**, in which case the "Navigation menu" option will be enabled.

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FtreZ5fpuf67D1AdrGCvB%2FSidebar%20options.png?alt=media&#x26;token=24424f39-5b73-4ff1-98a8-dc59795c912b" alt=""><figcaption></figcaption></figure>

The "Default" option will render a fixed left sidebar with Ubidots' standard menu layout in the app, where all the options will appear to end users based on their [role of permissions](https://help.ubidots.com/en/articles/2218051-user-management-roles).

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2Fy9AvhyDpd6tufJSCkjNo%2FKWG%20Default%20sidebar.png?alt=media&#x26;token=f4ae1d58-6501-4755-a177-fc1375ac6b8c" alt=""><figcaption></figcaption></figure>

### Custom

When selecting the "Custom" option, you'll be able to customize the sidebar at will. For example, in the below sidebar, menus, names, icons and dropdowns have been changed:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2F1HlmyWH6oBFX1t4I10ly%2FKWG%20Custom%20sidebar%20V2.png?alt=media&#x26;token=b480e533-0c44-4196-ab7f-15a7d3675c15" 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 either static or load dynamic, user-aware content from an HTTP request.

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FZwR4lAYd0kLAHC4cb2zp%2FKWG%20Custom%20sidebar%20V2%20Asidepanel.png?alt=media&#x26;token=ced6958b-47f4-4497-9518-044429b0c0c5" alt=""><figcaption></figcaption></figure>

This is possible via the "Edit menu" button, which opens an XML editor that includes a preview where you can see what the XML translates to:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FZ1lyczjZNKeyFaOqW9Dc%2FSidebar%20XML%20Editor%20V2.png?alt=media&#x26;token=a941e9e6-3f19-46a1-b8f3-18d4060c11f0" 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 %}