Skip to main content
All CollectionsUser Guides
App Builder: Customize the Navigation Menu
App Builder: Customize the Navigation Menu

Easily change the position and appearance of the navigation menu for you and your end users, separately.

Sergio M avatar
Written by Sergio M
Updated over a week ago

Looking to be as flexible as possible, Ubidots offers the option of changing the position of the navigation menu to either the top of screen (its default position) or to the left side — thus turning it into a collapsible navigation bar. Additionally, the lateral version of the menu can be customized to look and work as you see fit by changing colors, texts, buttons, icons, and more.

The changes of position, appearance, and functionality can separately affect the app’s end users on one hand, and the admin users and account owner on the other. This means that your end users can have a customized navigation menu that looks completely different to the one that you customize for yourself as the account owner.

Requirements

1. Switching the navigation menu’s position

1.1. Changing the menu’s position for owners and admin users

  1. Click on your profile picture’s drop down menu and then on “my account”.

  2. Scroll down to the “preferences” section and use the drop down menu next to “navigation menu style” to change the position of your navigation menu.

  3. Lastly, click on the “save” button to consolidate the change.

1.2. Changing the menu’s position for end users

  1. Click on “apps”.

  2. On the left-hand menu, click on “app builder”.

  3. Use the drop down menu next to “navigation menu style” to change the position of your navigation menu to “left navbar”.

  4. Click on the “save” button.

2. Customizing the navigation menu

The navigation bar can be currently customized when you change its position to the left side of the screen. There are two customization options, for owners and admins on one hand, and for end users on the other.

Note: These two customization options are not synchronized. Changing the “owner” navigation menu will have no impact on the one your end users see and vice versa.

2.1. Customizing the navigation menu for owners and admin users

  1. Click on your profile picture’s drop down menu and then on “my account”.

  2. Scroll down to the “preferences” section and use the drop down menu next to “navigation menu style” to change the position of your navigation menu to “left navbar”.

  3. Use the drop down menu next to the “menu” option from “default” to “custom”.

  4. Click on the “save” button.

  5. Now that the menu has changed its position, click on the pencil icon located in the lower left corner of the menu.

  6. Edit the XML code so that your menu ends up looking like you wish.

  7. Click on the "save" button to consolidate the changes.

2.2. Customizing the navigation menu for end users

  1. Click on “apps”.

  2. On the left-hand menu, click on “app builder”.

  3. Use the drop down menu next to “navigation menu style” to change the position of your navigation menu to “left navbar”.

  4. Click on the “menu items” drop down menu and select the “custom” option.

  5. Click on the “edit menu” button and change the XML so that your menu ends up looking like you wish.

  6. Once you finish editing, click on the “save” button of the XML editor and then, again, on the “save” button in the “app builder” page to save the changes.

Important note: The App builder’s XML includes the permissions for your end users. Therefore, modifying the permissions here can result in your users erroneously gaining access to certain areas of the app.

2.3. What can be changed in the lateral menu?

  • Buttons’ text.

  • Add/remove buttons.

  • Buttons’ icons. Use Fontawesome’s icon names for this.

  • Buttons’ path/link. Currently, external links open a different browser window. In the future, external pages will be embedded within Ubidots so that you remain in the same tab upon clicking any button.

Notes:

  • The colors and logo of the navigation menu (regardless of its position) are defined in the "branding" section of your app's settings.

  • Any changes made to the menu, whether it’s for owners/admins or for end users, affects only the lateral version; the “top navbar” menu can’t be changed.

  • The navigation menu's appearance and functionality can be brought back to its default version by going into the XML editor and clicking on the "restore default" button.

Did this answer your question?