Custom Actions

The Navbar Card extends Home Assistant's standard actions with additional functionality designed specifically for navigation and user interaction. These custom actions provide powerful ways to enhance your dashboard's usability.

Available Actions

In addition to Home Assistant's standard actions, the following custom actions are available:

Action	Description	Parameters
open-popup	Opens a popup menu defined in the route	-
toggle-menu	Opens Home Assistant's side menu	-
show-notifications	Opens the notifications drawer	-
quickbar	Opens Home Assistant's quickbar	mode: entities | commands | devices
navigate-back	Goes back in browser history	-
open-edit-mode	Opens dashboard edit mode	-
logout	Logs out current user	-
custom-js-action	Executes custom JavaScript	code: JS code

Basic Examples

Popup Menu

Create a route with a popup menu for quick access to common actions:

type: custom:navbar-card
routes:
  - icon: mdi:dots-horizontal
    label: More
    tap_action:
      action: open-popup
    popup:
      - icon: mdi:cog
        url: /config/dashboard
      - icon: mdi:bell
        tap_action:
          action: show-notifications
      - icon: mdi:logout
        tap_action:
          action: logout

Hold action / double tap action

Use different gestures for different actions:

type: custom:navbar-card
routes:
  - icon: mdi:lightbulb-outline
    label: Lights
    tap_action:
      action: navigate
      navigation_path: /lovelace/lights
    hold_action:
      action: quickbar
      mode: entities
    double_tap_action:
      action: open-edit-mode

Custom JavaScript Actions

Execute custom JavaScript code for advanced functionality:

type: custom:navbar-card
routes:
  - icon: mdi:code-braces
    label: Custom Action
    tap_action:
      action: custom-js-action
      code: |
        [[[
          // Get all lights
          const lights = Object.entries(hass.states)
            .filter(([id]) => id.startsWith('light.'));
          
          // Turn off all lights
          lights.forEach(([id]) => {
            hass.callService('light', 'turn_off', {
              entity_id: id
            });
          });
          
          // Show notification
          hass.callService('persistent_notification', 'create', {
            message: 'All lights turned off',
            title: 'Lights Control'
          });
        ]]]