How to add custom buttons to the side toolbar

Community Guides
, ,
1

Thanks to @tom_l who posted this a while ago.

Some system dashboards take several clicks to access. To save time you can add custom buttons to the side toolbar.

Using panel-redirect.js

  • Create a file called panel-redirect.js in your www folder.

  • It should contain the following:

/*
Add a link to the sidebar to any path in Home Assistant
Put this file in <config>/www/panel-redirect.js
In configuration.yaml:
panel_custom:
  - name: panel-redirect
    # url_path needs to be unique for each panel_custom config
    url_path: redirect-server-controls
    sidebar_title: Server Controls
    sidebar_icon: mdi:server
    module_url: /local/panel-redirect.js
    config:
      # Where you want to redirect to
      target: /config/server_control
*/
class PanelRedirect extends HTMLElement {
  connectedCallback() {
    if (this._info) {
      this._navigate();
    }
  }

  set panel(info) {
    this._info = info;

    if (this.isConnected) {
      this._navigate();
    }
  }

  _navigate() {
    history.replaceState(null, "", this._info.config.target);
    const event = new Event("location-changed", {
      bubbles: true,
      composed: true,
    });
    event.detail = { replace: true };
    this.dispatchEvent(event);
  }
}

customElements.define("panel-redirect", PanelRedirect);

Then… Example configuration.yaml:

frontend:

# Zigbee network map -----------------------------------------------------------

  - name: panel-redirect
  
# url_path needs to be unique for each panel_custom config

    url_path: redirect-zigbee
    sidebar_title: Zigbee network
    sidebar_icon: mdi:chart-bubble
    module_url: /local/panel-redirect.js

# Where you want to redirect to             

    config:
      target: config/zha/visualization

You can get the target url by opening Home Assistant in a browser and navigating to the appropriate screen.

Addition by @Sir_Goodenough …

Using Custom panel - Home Assistant

panel_custom:
  - name: ha_supervisor
    sidebar_title: Supervisor
    sidebar_icon: mdi:home-assistant
    js_url: /api/hassio/app/entrypoint.js
    url_path: 'hassio/dashboard'
    embed_iframe: true
    require_admin: true
    config:
      ingress: Supervisor
  - name: config/logs
    sidebar_title: Logs
    sidebar_icon: mdi:math-log
    module_url: https://10.27.18.8:8123/config/logs
    embed_iframe: true
    require_admin: true
    config:
      ingress: Logs

Using Webpage dashboard

There’s another for iframe capable external websites using webpage dashboard
The webpage dashboard uses the webpage card. This method replaces the old YAML iframe method if you used to have some of those.
These are less customizable, but can be installed using the GUI or YAML in your Dashboard. See the code and examples in the links rather than me repeating them here.

The Home Assistant Cookbook - Index.

2 Likes