Thanks for trying to help but I am confused.
Following the instructions on
Installation | Custom Sidebar Docs.
Did the following since I wanted
then I clicked on Configuration on the bottom right to get to this page Configuration File | Custom Sidebar Docs
I put this config/www folder. Sorry if I am sounding dumb but this is in the doco. I did not edit this file to order it the way I want yet as I wanted to see if it work partially and then I can edit it but no dice.
I had tried that as well before but it did not work.
On reading the instructions again I noticed it says the YAML is recommended because you can write code blocks in multiple lines.
So I have just edited the configuration.yaml to
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js
# - /local/community/custom-sidebar-v2/custom-sidebar-v2.js
# - /local/community/custom-sidebar-v2/custom-sidebar-v2-fixed.js
- /hacsfiles/custom-sidebar/custom-sidebar-yaml.js
then restarted HA
Downloaded and saved sidebar-config.yaml this time and removed all the id parameter (order: 0, order: 1… etc removed) which gives me the following in the sidebar-config.yaml.
order:
- new_item: true
item: Google
href: https://mrdoob.com/projects/chromeexperiments/google-gravity/
icon: mdi:earth
target: _blank
- item: overview
- new_item: true
item: Integrations
href: "/config/integrations"
icon: mdi:puzzle
- new_item: true
item: Entities
href: "/config/entities"
icon: mdi:hexagon-multiple
- new_item: true
item: Automations
href: "/config/automation"
icon: mdi:robot
- item: terminal
- item: hacs
notification: |
[[[
const outdatedHacsEntities = Object.values(entities.update).filter(
(entity) => entity.platform === 'hacs' && is_state(entity.entity_id, 'on')
);
return outdatedHacsEntities.length || '';
]]]
- item: config
bottom: true
- new_item: true
item: Server Controls
href: "/config/server_control"
icon: mdi:server
bottom: true
- item: logbook
bottom: true
- new_item: true
item: Logs
bottom: true
href: "/config/logs"
icon: mdi:math-log
- item: developer tools
name: Dev tools
icon: mdi:tools
bottom: true
- item: history
hide: true
- item: snapshots
hide: true
- item: backups
hide: true
- item: map
hide: true
- item: energy
hide: true
- item: media
hide: true
exceptions:
- user:
- Jim Hawkins
- Long John Silver
order:
- new_item: true
item: Updates
href: "/config/updates"
icon: mdi:update
- user: Palaus
extend_from: base
order:
- item: history
- item: media
I refresh my browser and no change.
If you did that, it is impossible that you ended with a sidebar-order.json instead of a sidebar-config.json as you have mentioned two times. Something that belongs to custom-sidebar-v2.
Then, the same that I mentioned at the beginning. Follow the troubleshooting. The errors that you posted before belonged to custom-sidebar-v2.
Ok so in developer console of Edge I have this when I filter using “side”
I am not sure why there is a reference to an error for custom-sidebar-v2. I have deleted it from hacs and checked folder deleted automatically from community folder.
I see uncaught error custom-siderbar.js… not sure what that means
thanks
After deleting it from your folder and from the extra_module_url in your config, you need to restart Home Assistant and clean cache.
It means that it doesn’t found /hacsfiles/custom-sidebar/custom-sidebar-yaml.js. So the same, after doing the changes in your config in the extra_module_url, restart Home Assistant and clear cache.
Right so when you say clear cache, I assume you mean clear Edge browser history etc right?
Did that a few times now.
So I tried changing the link in the configuration from
- /hacsfiles/custom-sidebar/custom-sidebar-yaml.js to
- /local/community/custom-sidebar/custom-sidebar-yaml.js
this temporarily shows me the sidebar items I am expecting as I hit refresh frantically as HA is restarting and then it switches to default sidebar items.
So I am trying to figure out two things I guess.
Why is the link “/local/community/custom-sidebar/custom-sidebar-yaml.js” working partially as opposed to the “/hacsfiles/custom-sidebar/custom-sidebar-yaml.js”
Why does it go back to default items?
No, it means to clear Home Assistant front-end cache which is very stubborn. One solution is to open Home Assistant in an incognito window and login from there. If everything works well there, then you are sure that you are suffering from caching issues. You can follow the steps described in the troubleshooting section to clear cache from the Dev Tools.
Right ok
So went to Edge browser Inprivate mode and tried to get through there. Restarted HA and same thing. As restarting and refreshing it shows the custom items and as soon as everything finishes loading it goes back.
I followed the instructions you mentioned. That is ‘If you are in a browser, open the developer console, go to Network and check the checkbox labeled as Disable cache, refresh the browser with the developer console open.’
In that same window (the network tab), in the filter field search for custom and check if custom-sidebar-yaml.js is there or what appears in its place.
Also, post the results of the troubleshooting:
custom-sidebar version appears?In that same window (the network tab), in the filter field search for custom and check if custom-sidebar-yaml.js is there or what appears in its place.
Troubleshooting:
console.info is there (if you are using the JSON version it will say (JSON)):No haven’t got this 
Check that there are no errors or warnings coming from the plugin in the browser developer console. This is what I got.
Check that you have added the extra_module_url in the frontend entry on your configuration and using the provided paths.
As you can see I have switched from hacfiles to local/community as its thonly one that seems to make temporary change while restarting as opposed to to not at all.
Check that you have placed your sidebar-config.yaml or sidebar-config.json (depending on the configuration format that you have chosen) inside the <config directory>/www/ directory.
Try with a very simple configuration (like a title change) without exceptions or advanced options. If the customisation is applied, then start to add one by one pieces of block until you reach to the one that is provoking the issue.
works when restarting only
cs_debug to the URL and reload your Home Assistant instance (e.g. http:your-home-assistant-domain:8123?cs_debug). You will see different messages in the console. Check if the raw config is loaded correctly and if the compiled config contains all the elements that you need. If you are not able to interpret the debug log messages, open an issue in the repo providing the content of these logs.That is what is happening, until you don’t fix the issue that your system keeps trying to load custom-sidebar-v2-fixed.js and not custom-sidebar-yaml.js you cannot make the plugin to work (basically because the system is not loading it). You have a caching issue there, if it is not related to Home Assistant or your browser, then it is related to your provider, your reversed proxy or whatever middle network layer that you have there. Check this for an example, it shows you what kinds of things can provoke issues like that.
Yes, it is logic, Home Assistant is not loading the plugin
The same, the errors show that the system is still trying to load custom-sidebar-v2-fixed.js (and it is not loading custom-sidebar-yaml.js).
The same, until you don’t fix the above issue, it doesn’t matter the troubleshooting steps because the troubleshooting steps are intended for the case that Home Assistant is loading the plugin correctly (and the console info is shown in the developer console). And until you don’t fix a bullet point of the troubleshooting you cannot continue to the next one, first thing is to get the console info of the plugin in your console and to achieve that, the plugin needs to be loaded first.
By the way, as you are using HACS do not use the local path, the local path is intended only for manual installations and it doesn’t have the non-caching functionality of the hacsfiles alias.
The same, ignore anything related to custom-sidebar configuration. Try to fix the issue that you are having and until you don’t see custom-sidebar-yaml.js loaded in your network tab, do not try anything related to the plugin configuration.
I really don’t know what is provoking that in your set up, but until you don’t see custom-sidebar-yaml.js loaded in the network tab instead the custom-sidebar-v2-fixed.js resource do not try to test the plugin because the plugin is not loaded by the system.
@Mrsash,
I would also visit the /config/lovelace/resources dashboard to see what you have there.
Were the “iron-selected” options removed in 2025.5? Everything else works after updating except these it seems so the rounding style like material3 is gone now for me, damn.
title: 'Nestico Home'
subtitle: 'Welcome Home'
# subtitle_color: var(--primary-text-color)
sidebar_background: var(--card-background-color)
icon_color_selected: var(--accent-color)
sidebar_border_color: transparent
styles: |
:host([expanded]) .iron-selected paper-icon-item::before,
:host([expanded]) a:not(.iron-selected):focus::before {
border-radius: 40px;
}
The entire sidebar was replaced, so yes, there are no more iron or paper-items elements. To style the new elements you would need to use a card-mod theme because they are inside the shadowRoot of the sidebar items now.
Hi,
Thanks to @elchininet for the great add-on. For me, it’s one of the most useful when it comes to the GUI. Before, I had to reposition the sidebar every time I switched devices, but now I’ve configured it once and it works exactly the way I want 
By the way, I wanted to share an additional configuration I’ve applied that saves a bit of space in the sidebar and can eliminate the need to scroll when there are many options. I’ve described it in the add-on’s repo: Multiple elements in single row · elchininet/custom-sidebar · Discussion #410 · GitHub
Here’s a small preview:
Cheers
