Note: some useful insights for troubleshooting in this thread. Also see these notes.

Home Assistant Custom Sidebar v2

Custom HACS Lovelace Plugin that allows you to rearrange, hide, and add Home Assistant sidebar menu items.

This is a refactor of the original Custom Sidebar plugin by @Villhellm
to make it work with recent versions of Home Assistant.

Villhellm's code was refactored with simplicity and performance in mind.
The YAML parser that was part of the original code has been removed and so the config should now be provided as JSON.

HACS Installation

Go to HACS / FrontEnd, add custom repository, then find it in the list and click Download.

• add in confgiguration.yaml (unless you use browser_mod):

frontend:
  extra_module_url:
    - /hacsfiles/custom-sidebar-v2/custom-sidebar-v2.js

Manual install

• put custom-sidebar-v2.js in <config directory>/www/
• add in confgiguration.yaml:

frontend:
  extra_module_url:
    - /local/custom-sidebar-v2.js

Configuration

config is now in JSON format (not yaml).
Save it as sidebar-order.json and put it in <config directory>/www/.
If using manuall install, you can include the config object directly in the .js file (follow comments there).

For full example see this: https://raw.githubusercontent.com/galloween/custom-sidebar-v2/main/sidebar-order.json
Also check original repo docs for explanations.

Short example:

  {
  "order": [
    {
      "new_item": true,
      "item": "Google",
      "href": "https://mrdoob.com/projects/chromeexperiments/google-gravity/",
      "icon": "mdi:earth",
      "target": "_blank",
      "order": 4
    },
    {
      "item": "overview",
      "order": 2
    },
    {
      "item": "supervisor",
      "order": 1
    },
    {
      "new_item": true,
      "item": "Integrations",
      "href": "/config/integrations",
      "icon": "mdi:puzzle",
      "order": 3
    },
    {
      "item": "automations",
      "bottom": true
    },
    {
      "item": "settings",
      "bottom": true
    }
  ]
 }

Notes

• all items in config.order should have unique "item" property
• check out this post on how to find the name of the menu item
• items with "hide: true" are not considered in new order,
• all other items will be ordered according to their (optional) "order" property OR in the order of appearance in config.order
• if using "order" property, make sure either all items (except hidden) have this property, or none of them (otherwise order may be messed up).
• any items present in Sidebar, but not in config.order, will be shown on the bottom of the top part of the list
• when using Exceptions, pay attention to "base_order" property - if it's set to "false", the main config.order will be ignored, leaving you with default sidebar (which now should be modified with the exception's order)
• if you seem to be stuck with old config, try clearing site data - instruction here

Exceptions

You can define user-specific order using exceptions feature (see details in original repo)

{
  "exceptions": [
    {
      "user": ["Jim Hawkins", "Long John Silver"],
      "order": [
          ...
      ]
    }
  ]
}

Home Assistant built-in sidebar configuration options

Check out Home Assistant's "native" sidebar tools - quite possibly, it will be enough for your needs.

• You can use HA's panel_custom integration to add internal links to the sidebar. Take a look at this tutorial. Official docs.
• You can use HA's panel_iframe integration to add external links. See below. Official docs.
• You can click and hold the Home Assistant header on top of the sidebar and then it will allow you to add/remove and re-order some of the items (but not add new custom ones):

This feature is also accessible from your profile settings (if you click on your name in the bottom left corner):

Combine with Iframe Panel to show external content inside Home Assitant

If you use Home Assistant's Iframe Panel feature and have some iframe_panel links configured in configuration.yaml

panel_iframe:
  router:
    title: "Router"
    url: "http://192.168.1.1"
    icon: mdi:router-wireless
  fridge:
    title: "Fridge"
    url: "http://192.168.1.5"
    icon: mdi:fridge

then you can reorder iframe links, same as regular ones, in sidebar-order.json:

{ order: [
  { "item": "fridge" },
  { "item": "overview" },
  { "item": "router" }
  ...
]}

---

by @galloween