Rearrange Sidebar

Have you ever been slightly annoyed that you can’t change the order of the Home Assistant sidebar?
I am here to put your mind mildly at ease.

With this JS module you can now set the order of the sidebar and you can move things down to hang out with Developer Tools and Configuration. That’s it, that’s all it does.

All instructions are in the repository README, but let me know if you run into issues.

Custom Sidebar

Please submit bug reports by opening an issue in the repository.



(Translation: “thanks, this looks cool and I’m gonna try it out”)

1 Like

Nice. Now we just need to get notifications back to where it was.


Im definetly going to try this out after work!
Thank you

This is exactly what I’m looking for, thank you!

I finally reached a point where my sidebar has a scroll bar. And many of the entries (map, for example) I rarely or never use.

However, it doesn’t seem to be working for me.

I followed all the steps: copied the javascript file to www, added the module under frontend: in configuration.yaml, created the new .yaml file in www, did a check config, and restarted. I refreshed the browser, but the order hasn’t changed.

Any ideas on what stupid thing I might have done, or failed to do?

I also tried this with no success. Followed the instructions to the letter but the sidebar did not change. I had great hope for this as my sidebar is a real mess with 18 entries and more all the time. Any help from the OP?

1 Like

Did either of you ever get this working? Any clue as to what I (and now, hackshaq) might be doing wrong?

I didn’t actually try it. I’m fine with the sidebar order, I just want my notification back on the header rather than buried in the hidden sidebar.

1 Like

It’s working fine here, installed and setup as per the instructions…

1 Like

Hey Villhellm I have a minor issue with this but am not sure where to raise it.

I have a simple-icon assigned to the Grafana panel shortcut using custom sidebar.

This works perfectly on my desktop.

In the iOS app the icon rarely displays. The empty space where the icon should be still links to the Grafana panel when tapped.

I’m not sure if the issue is due to the app, simple-icons, or custom-sidebar.

The icon is meant to be a material design icon. I can’t actively support something I don’t use, sorry.

That’s unfortunate. Nearly all brand icons have moved from mdi to Simple Icons. So these are going to pop up in a lot more people’s configurations. There was a note about this in the 0.113 release notes.

Most of the removed MDI icons can be found in Simple icons , which is available as a custom integration .

0.113: Automations & Scripts, and even more performance!

Also as I said I’m not convinced it’s custom-sidebar issue as it works faultlessly using a desktop browser.

If not simple-icons, how about local icons?

Again, it is only designed to use with material design icons. You can add other options if you wish, but I will not support it personally.

I’m not using this custom component but am using simpleicons in the side bar. Or at least i’m trying to. They rarely if ever show up. It is totally hit or miss. On both desktop and mobile chrome, as well as the mobile app. I’m at a loss because i reaaaaaaaallly want to see those brand icons in the side bar.

1 Like

I might open a simpleicons issue then.

1 Like

There was already an issue open.

Does this interfere with the sidebar rearrange/hide functions now included in the core (since 0.115)?

It will override any order you set with the new feature. Hiding an item in the new feature or in Custom Sidebar will have the same results.

If you set a custom sidebar title with this plugin it will cause the “Done” button to not show up to save your order when you go into edit mode. Refreshing the page should save the changes anyway

1 Like

I’m trying to load up my OctoPrint page within my HA page however it just navigates to the Octoprint page instead of loading it into my HA view (with the HA bar still at the side)
Am I doing something wrong or is that functionality just not possible?

- new_item: true
    item: OctoPrint
    href: http://octopi.local

That’s what I have