node-red-contrib-ui-navbar

A custom Node-RED Dashboard 2.0 widget that provides a simple, configurable navigation bar (navbar).
Each button in the navbar can send a payload and optionally trigger a page change when used with ui-control.

Installation

From your Node-RED user directory (typically ~/.node-red):

npm install node-red-contrib-ui-navbar

Restart Node-RED after installation.

Usage

1. Drag the UI Navbar node into your flow.

2. Open the node’s Properties panel.

3. Use the Add Button option to add one or more buttons.

   • Each button has:

     • Label → Text displayed on the navbar.
     • Value → Payload sent when the button is clicked.

4. Deploy your flow.

5. The navbar will appear on every page in your Dashboard 2.0.

When a button is clicked, the node outputs a message like:

{ "payload": "I1O1", "topic": "ui-navbar" }

This can be connected to a ui-control node if you want the button to switch pages.

Example Flow

An example flow is provided in examples/basic.json.

To use it:

1. In the Node-RED editor, click the hamburger menu → Import → Clipboard.
2. Paste the contents of examples/basic.json.
3. Deploy.
4. You’ll see a demo navbar with two sample buttons (I1O1, I2O1).

Node-RED Scorecard Compliance

• License: MIT
• Bugs URL supplied
• Package name follows guidelines
• Node-RED keyword set
• Supported Node-RED Version: >=3.0.0
• Node.js Version: >=14
• Package uses a unique name
• Nodes: ui-navbar
• Nodes have unique names: Yes
• Nodes have examples: Yes (examples/basic.json)

Roadmap

• [ ] Improve Add Button behavior in the Properties panel (dynamic list UI like other Dashboard nodes).
• [ ] Styling options for colors, active state, and alignment.

License

MIT