Skip to main content

The on_click property

The on_click property allows one to attach click actions to specific sidebar items. These actions will be triggered every time that the sidebar item containing an on_click property is clicked. The on_click property doesn't stop redirecting to a dashboard or to an external page if it is provided together with an href property. But if the href property is # (or it is just omitted in new items), then the on_click action will be executed without redirecting to any dashboard or external page.

The navigate action allows one to navigate to a specific dashboard when an item is clicked. Using this action with a regular string doesn't have any advantage on top of just using the href item property, but the real power of this action is that it can generate the path to the dashboard using a JavaScript template, so there could be some logic involved to decide to which path should redirect the item when clicked.

warning

You should not use this action in an an item that contains an href property because the default functionality of redirecting to a dashboard taking into account the href and the navigate action functionality will clash.

info

When you visit a URL directly, there is a logic to select the proper sidebar item taking into account its href. You need to be aware that when using a navigate action, there is no way for the plugin to know that an item redirects to a dashboard path, so in those cases the item will not be selected.

tip
  1. The path parameter of a navigate action accepts a JavaScript template. The JavaScript template used there will have access to two variables: item and itemText. These variables are related to the clicked item, the first is the configuration object of the item (including an element property which is the HTML element relative to the sidebar item) and the second is the text of the item.
  2. Apart from the path parameter, this action also accepts an optional replace boolean parameter to decide if the path should replace the current one in the history.
<config directory>/www/sidebar-config.yaml
order:
  - new_item: true
    item: 'Decision item'
    icon: 'mdi:arrow-decision-outline'
    on_click:
      action: 'navigate'
      path: |
        [[[
          if (is_state('input_boolean.dev_mode_active', 'on')) {
            return '/config/developer-tools';
          }
          return '/lovelace';
        ]]]

Call service action​

The call-service action allows one to call a specific service when a sidebar item is clicked. It rquires a service parameter indicating which is the service that one wants to execute and an optional data parameter in the cases that it is required by the service.

tip

The data parameter of a call-service action accepts JavaScript templates in its values. The JavaScript templates used there will have access to two variables: item and itemText. These variables are related to the clicked item, the first is the configuration object of the item (including an element property which is the HTML element relative to the sidebar item) and the second is the text of the item.

<config directory>/www/sidebar-config.yaml
order:
  - new_item: true
    item: 'Living-room lights'
    icon: 'mdi:lightbulb-group'
    icon_color: |
      [[[
        return is_state('light.living_room', 'on')
          ? 'var(--accent-color)'
          : 'var(--sidebar-icon-color)';
      ]]]
    on_click:
      action: 'call-service'
      service: 'light.toggle'
      data:
        entity_id: 'light.living_room'

JavaScript action​

The javascript action allows one to execute an arbitrary JavaScript code when the sidebar item is clicked. It requires a code parameter with the JavaScript template code without being enclosed between [[[ ]]].

tip

All the properties and methods available in JavaScript templates will be available in this JavaScript code. On top of this, it will also have access to two variables: item and itemText. These variables are related to the clicked item, the first is the configuration object of the item (including an element property which is the HTML element relative to the sidebar item) and the second is the text of the item.

<config directory>/www/sidebar-config.yaml
order:
  - new_item: true
    item: 'Restart'
    icon: 'mdi:restart'
    on_click:
      action: 'javascript'
      code: |
        callService('homeassistant', 'restart');

Open dialog action​

The open-dialog action allows one to open a dialog when a sidebar item is clicked. It requires a type parameter indicating which kind of dialog should be open. The type parameter allows two values, more-info to open a more info dialog of an entity or restart to open the dialog to restart Home Assistant. If one specifies the type parameter as more-info, the action will require an entity_id parameter indicating which entity should shown the more info dialog.

Important

Take into account when using the open-dialog action with a restart type, that even if every user can open the restart dialog, only admin users are authorized to restart Home Assistant.

<config directory>/www/sidebar-config.yaml
order:
  - new_item: true
    item: 'Living-room lights'
    icon: 'mdi:lightbulb-group'
    on_click:
      action: 'open-dialog'
      type: 'more-info'
      entity_id: 'light.living_room'
  - new_item: true
    item: 'Restart'
    icon: 'mdi:restart'
    on_click:
      action: 'open-dialog'
      type: 'restart'