Navigation Menu

Who it’s for

Dashboard authors building multi-state or SCADA-style dashboards ask “how do I give people one menu that moves them between states, opens a link, or runs an action — and still shows where they are?” They want a sidebar or top bar that looks and behaves the same on every state, not a one-off button repeated on each screen. Navigation Menu builds that menu entirely from configuration, with no telemetry involved.

What it does

A dashboard with states default, state_2, and state_3 gets three menu items, one per state. Clicking the State-2 item switches to state_2 and carries over any state parameters already set. The moment that state is active, the State-2 button lights up on its own.

• Sidebar or top bar layout, with a compact icon-only mode for tight spaces.
• Four action types per item — update or open a dashboard state, open an external URL, or run a ThingsBoard widget action.
• Active highlighting that follows the viewer — by dashboard State ID, or, for an item using a Custom parameter, by that parameter’s value. This lets several items on one state act like tabs.
• Optional state parameters — pass a device, asset, entity view, or customer as an entity, or pass any custom name and value, including a JSON object.
• Dark glass and Light glass presets, or a fully custom look with your own colors, border, fonts, and scoped CSS.
• Only navigates and highlights; it doesn’t read telemetry or manage alarms, and it needs no datasource of its own.

How to set up

Data keys

Navigation Menu takes no datasource, attribute, or telemetry key. There is no target device or target entity to bind — every menu item comes directly from the settings below.

Menu items

Update current dashboard state and Open dashboard state behave differently once you add a parameter: Update merges your parameter into the state’s existing parameters, while Open starts fresh with only the parameter you set. To use Run ThingsBoard action, add a widget action to this widget under the elementClick source first, then set ThingsBoard action name to match its name exactly.

How to customize

General & layout

• To show or hide the menu title — turn on or off Show title, and set the text in Menu title.
• To switch from a sidebar to a top bar — turn on Horizontal layout.
• To show icons only, with no text — turn on Compact mode (Only icons).

Appearance

• To use a built-in look — set Style preset to Dark glass or Light glass.
• To design your own look — set Style preset to Custom, then set Background, Border radius, Border color, and Border width.
• To resize the title or the menu text — set Title font size and Menu font size.
• To go beyond the built-in settings — set Style preset to Custom and write Advanced: Custom CSS, scoped automatically to this widget with the :menu selector.

Passing parameters to a dashboard state

Dashboard entity passes a Device, Asset, Entity view, or Customer as entityId. Leave Entity parameter name empty and the entity lands at the root of the state parameters:

{ "entityId": { "entityType": "DEVICE", "id": "74439270-550c-11f1-aa63-6b62c4bc86ce" } }

Set Entity parameter name (for example selectedDevice) to nest it instead — the same shape ThingsBoard’s own built-in widget actions produce:

{
  "selectedDevice": { "entityId": { "entityType": "DEVICE", "id": "74439270-550c-11f1-aa63-6b62c4bc86ce" } },
  "targetEntityParamName": "selectedDevice"
}

Point a dashboard alias set to “Entity from dashboard state” at either shape — add the matching parameter name if you set one.

Custom parameter writes Parameter value under the name in Custom parameter name. A value that looks like a JSON object is parsed and passed as an object; anything else is passed as plain text:

{ "buildingId": "building-A" }

This is also how sub-state or tab-style navigation works: give two or more items the same Dashboard state ID and Action type, but a different Custom parameter value. Active highlighting then follows whichever value matches the current state, instead of the state ID alone.

Tips

• Leave Menu item ID blank for most items. The generated key stays stable across reorders, since it comes from the parameter value, action name, or label rather than the item’s position.
• Every click also sets a menuAction parameter to that item’s key. Read it from a custom widget or alias if you want to know which item was used, and avoid reusing menuAction as your own Custom parameter name.
• Leave ThingsBoard action name blank on a Run ThingsBoard action item and it falls back to the item’s key — keep the two in sync if you rename the item later.
• Test Custom style changes with Style preset set to Custom; presets ignore Background, Border, and Custom CSS entirely.