Custom sidebar menu
Customize the sidebar elements to create user-aware navigations.
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, as seen below:
Top Navbar
This is how an application looks like with a Top navbar:
Left Navbar
This is how an application looks like with a Left navbar:
It's worth noting that in the latter case the bar can be collapsed to gain space in the rest of the page:
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.
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.
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:
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.
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:
This is the XML that creates the custom sidebar seen above:
Migration from v1 to v2
Contact support
To migrate your XML v1 (deprecated in favor of v2) to v2, please contact us at [email protected].
Last updated
Was this helpful?