Custom sidebar, need help

Configuration Frontend
, ,
1

I noticed a lot of WTH sidebar posts are recommending to use custom-sidebar as a non-core solution. I installed it using HACS but I’m stuck how to get the sidebar configured. Anyone have a good tutorial they can point me to?

2

Are you after a video tutorial as the readme appears to be very detailed?
What are you after exactly with the outcome of the custom sidebar?

This is how you’d start the setup.

configuration.yaml for loading the plugin

  • Open your main configuration.yaml file (also in the /config directory).
  • Under your frontend: section, add an entry for the extra module URL (the JavaScript file that makes this custom sidebar work).

For example, YAML config version:

yaml

Copy code

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

Or, if you want to configure it in JSON format:

yaml

Copy code

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

Note: If you installed the file manually, the URL might be /local/custom-sidebar-yaml.js or /local/custom-sidebar-json.js?v1.0.0.

How to Organize Your Sidebar Configuration

Once you have everything set up, you’ll configure all sidebar changes inside sidebar-config.yaml (YAML mode) or sidebar-config.json (JSON mode), located in /config/www/.

Below is a very minimal YAML example (sidebar-config.yaml):

yaml

Copy code

title: My Home
order:
  - item: overview
    order: 1
  - new_item: true
    item: Google
    href: "https://www.google.com"
    icon: mdi:earth
    order: 2

If you prefer JSON, your sidebar-config.json could look like:

json

Copy code

{
  "title": "My Home",
  "order": [
    {
      "item": "overview",
      "order": 1
    },
    {
      "new_item": true,
      "item": "Google",
      "href": "https://www.google.com",
      "icon": "mdi:earth",
      "order": 2
    }
  ]
}
  • If you installed via HACS, the JS file path will be /hacsfiles/custom-sidebar/....
  • If you installed manually, the JS file path will typically be /local/custom-sidebar-yaml.js or /local/custom-sidebar-json.js.
  • The plugin automatically replaces or reorders your Home Assistant sidebar after a full restart.
  • To ensure new versions of the plugin get loaded (rather than cached), append ?v=1.0.0 or some version string to the .js file reference.
2 Likes
3

Hi @JerryM thank you for the detailed write up. Somehow I missed adding the sidebar-config.yaml file. The GitHub page is detailed and a bit overwhelming which is probably why I got lost and missed it.

I’ve got the sidebar running now, woo hoo! :blush:

4

Hi @art123,
If you have some feedback about how to make the documentation clearer/less overwhelming, create an issue in the repo with your proposal and we can discuss it there.
Regards

1 Like