Custom sidebar menu

Customize the sidebar elements to create user-aware navigations.

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, as shown below:

This is how an application looks with a top navbar:

This is how an application looks with a left navbar:

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

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

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.

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:

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.

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:

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

<!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

Contact support

To migrate your XML v1 (deprecated in favor of v2) to v2, please contact us at support@ubidots.com.

PreviousPublish NextXML v2.0

Last updated 2 months ago

Was this helpful?

<!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>

Custom sidebar menu

Top Navbar

Left Navbar

Overview

Custom

Migration from v1 to v2