🗄️ Sidebar Organizer

Share your Projects! Dashboards & Frontend
, ,
1

I took inspiration from @elchininet custom-sidebar , but found it missing a few options I wanted for customizing the Home Assistant sidebar. That’s why I created Sidebar Organizer a custom plugin that gives you full control over the layout and organization of your sidebar.

:file_cabinet: Sidebar Organizer is a custom Home Assistant plugin designed to give you full control over the layout and organization of the sidebar. It allows you to customize the appearance, group items, and reorder or collapse items for a cleaner, more intuitive navigation experience.

Features

  • Customize Sidebar Appearance: Personalize the look of your sidebar with custom styles, colors, and layouts.
  • Group Menu Items: Organize sidebar items into specific groups for better clarity and separation of content.
  • Reorder Items: Drag and drop to reorder items within groups or across the sidebar.
  • Expand/Collapse Groups: Expand or collapse groups of items to save space and minimize clutter.
  • Manage Bottom Items: Move specific items to the bottom of the sidebar for quick access.
  • Default Collapse Settings: Choose which groups of items should be collapsed by default for a cleaner view.


Download Sidebar Organizer Here :point_down:

14 Likes
2

Thank you for this great add on to our dashboard projects. Really useful .
couple questions:

  1. How to get rid of empty space between a main information and groups?
  2. Is it possible to relocate groups to the bottom of the side bar?
    image
    image897×1828 101 KB
3

Hi @Zenia, actually I hadn’t thought about that possibility at all. I can look into it and possibly add it to the next release.

1 Like
5

Hello again. I have another crazy idea :grin:
Maybe you can add ( if it’s possible ) grouping for floors cards:

image
image789×1174 34.1 KB

            - type: custom:stack-in-card
              mode: vertical
              card_mod:
                style: |
                  ha-card {
                    --ha-card-background: transparent;
                    color: var(--primary-color);
                  }
              cards:
                - type: custom:expander-card
                  card_mod:
                    style: |
                      button.open {
                        background: teal !important;
                      }
                      button.close {
                        background: transparent !important;
                      }
                  title-card:
                    type: custom:mushroom-template-card
                    primary: First Floor
                    secondary: '{{ states(''light.first_floor_lights'') }}'
                    icon: mdi:home-floor-1
                    icon_color: >-
                      {%if is_state('light.first_floor_lights', 'off') %} teal
                      {% else %} amber {% endif %}
                    card_mod:
                      style: >
                        ha-card {
                          background: none !important;
                        }

                        ha-card:after {

                        content: " {{ states.light | selectattr('state', 'eq',
                        'on')
                          | rejectattr('name', 'search', 'First Floor')
                          | map(attribute='entity_id') | map('area_name')
                          | select('in', ['Living Room', 'Kitchen', 'Hallway', 'Kids Room', 'Garage', 'My Bathroom'])
                          | list | count }}";
                          position: absolute;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          background: teal;
                          color: var(--card-background-color);
                          font-weight: bolder;
                          border-radius: 50% 50%;
                          top: -5px;
                          left: 40px;
                          width: 20px;
                          height: 20px;
                          font-size: 10px;
                          }
                  cards:
                    - type: custom:mushroom-template-card
                      primary: Living Room
                      secondary: '{{ states(''light.living_room_lights'') }}'
                      icon: mdi:sofa
                      icon_color: >-
                        {%if is_state('light.living_room_lights', 'off') %} teal
                        {% else %}
                         amber {% endif %}                                
                      tap_action:
                        action: navigate
                        navigation_path: living-room
                    - type: custom:mushroom-template-card
                      primary: Kitchen
                      secondary: '{{ states(''light.kitchen_lights_2'') }}'
                      icon: mdi:pot-steam
                      icon_color: >-
                        {%if is_state('light.kitchen_lights_2', 'off') %} teal
                        {% else %}
                         amber {% endif %}                                
                      tap_action:
                        action: navigate
                        navigation_path: kitchen
                    - type: custom:mushroom-template-card
                      primary: Hallway
                      secondary: '{{ states(''light.hallway_lights'') }}'
                      icon: mdi:hat-fedora
                      icon_color: >-
                        {%if is_state('light.hallway_lights', 'off') %} teal {%
                        else %}
                         amber {% endif %}                                
                      tap_action:
                        action: navigate
                        navigation_path: hallway
                    - type: custom:mushroom-template-card
                      primary: Kids Room
                      secondary: '{{ states(''light.kids_fan_down_light'') }}'
                      icon: mdi:teddy-bear
                      icon_color: >-
                        {%if is_state('light.kids_fan_down_light', 'off') %}
                        teal {% else %}
                         amber {% endif %}                                
                      tap_action:
                        action: navigate
                        navigation_path: kids-room
                    - type: custom:mushroom-template-card
                      primary: Bathroom
                      secondary: '{{ states(''light.my_bathroom_lights'') }}'
                      icon: mdi:shower-head
                      icon_color: >-
                        {%if is_state('light.my_bathroom_lights', 'off') %} teal
                        {% else %}
                         amber {% endif %}                                
                      tap_action:
                        action: navigate
                        navigation_path: first-floor-bathroom
                    - type: custom:mushroom-template-card
                      primary: Garage
                      secondary: '{{ states(''light.my_bathroom_lights'') }}'
                      icon: mdi:go-kart
                      icon_color: >-
                        {%if is_state('light.garage_lights_light', 'off') %}
                        teal {% else %}
                         amber {% endif %}                                
                      tap_action:
                        action: navigate
                        navigation_path: garage
                - type: custom:expander-card
                  card_mod:
                    style: |
                      button.open {
                        background: teal !important;
                      }
                      button.close {
                        background: transparent !important;
                      }

Maybe not that complicated but at list , Floor #1 and all rooms to expend and navigate to it.
Thank you

1 Like
6

v1.1.0

New Features :tada:

custom-styles
custom-styles2044×1590 250 KB

Fixes :bug:

New Contributors

Full Changelog: Comparing v1.0.2...v1.1.0 · ngocjohn/sidebar-organizer · GitHub

2 Likes
7

Awesome custom integration!! I’ve been waiting for this integration for so long – fantastic! If page order could also be customized individually, and if there were similar options as in the ‘Custom Sidebar’ custom integration, it would be a strong contender for Employee of the Year :grinning:. Many thanks!

1 Like
8

Thank you! :call_me_hand:

The order for group items is assigned when selecting, or by name. And for groups with drag n drop…

2025-04-18 17.16.01

Unfortunately, I don’t have those skills yet. :sneezing_face: :joy:

9

I understood how to sort the group panels – very intuitively implemented, thx!. But the pages within a group panel can only be sorted alphabetically. It would be great if manual sorting via drag and drop were possible here too. :slight_smile:

image
image1498×902 104 KB

and I’m counting on you – I’m sure you’ll have those skills soon! :slight_smile:

10

2025-04-18 21.25.31

11

Is there a way to access the configuration menu directly? Press and hold on the profile button does nothing.

Edit: Tried on several browsers and on the app in two different devices. When I press and hold the profile button the configuration menu appears, then disappears again as soon as I remove my finger.

12

HI @jackjourneyman … Unfortunately, this is the only way for dialog popup. Because the plugin needs to load some HA components. Can you check the browser console to see if there is any error? Or possibly clear the cache? :neutral_face:

13

Maybe it’s due to the Mac, because in none of the browsers – Chrome, Safari, or Edge – is sorting the pages via drag and drop in the UI possible (see also my screenshot). I’m now setting the order manually in the YAML file and no longer using the GUI. Thx.

Mac OSX, Sequioa, Sidebar-Organizer Version 1.2.0

14

Sorry, I forgot to mention that it will be in the next release :sweat_smile:

1 Like
15

Very nice – can’t wait! :blush:

16

v1.3.0

New Features :tada:

https://github.com/user-attachments/assets/1784f4b3-8306-4a1f-83a4-cd6b8bfc9444(image larger than 3 MB)

Full Changelog: Comparing v1.2.0...v1.3.0 · ngocjohn/sidebar-organizer · GitHub

1 Like
17

v1.4.0

:warning: Important Notice

This is the final functional release of Sidebar Organizer compatible with Home Assistant versions prior to 2025.5.x.

The upcoming Home Assistant 2025.5.x release introduces significant changes to the sidebar system, which will require major refactoring of Sidebar Organizer.

:lock: If you depend on Sidebar Organizer, you must remain on Home Assistant versions earlier than 2025.5.x until an updated version of the plugin is released.

What’s Changed

New Features :tada:

Full Changelog: Comparing v1.3.0...v1.4.0 · ngocjohn/sidebar-organizer · GitHub

18

given the fact 2025 HA sidebar has fundamental changes, and both you and @elchininet face challenges updating your custom sidebar plugins, would this not be a grand time to merge your talents and move both resources to 1?

Not trying ti interfere with your ‘business’, but it seems you 2 have so much experience and great ideas, merging would amount to 1+1=3 ?

19

I would keep them separately because they aim for different things. In terms of maintainability I will avoid at all costs multiplying the custom-sidebar code several times just to add a single functionality. That does not bring any good for the future of the plugin. But @VietNgoc is free to port custom-sidebar functionalities to this plugin if he wants to carry with that burden, it is up to him and that is the best of Open Source projects. :slightly_smiling_face:

2 Likes
20

I’ve actually been trying to add the group feature to custom sidebar, but I don’t have the knowledge to implement it yet. :sleepy: I’m still learning by exploring other resources… This plugin was also created thanks to the @elchininet libraries and inspiration from its code… :pray:

1 Like
21

:arrows_counterclockwise: Sidebar Organizer v2.0.0 – Major Compatibility Update

:rocket: What’s New

  • Home Assistant 2025.5.0+ Compatibility
    This version has been reworked to support the major sidebar changes introduced in Home Assistant 2025.5.0 and later.

:warning: Migration Notes

  • If you’re running Home Assistant 2025.5.0 or newer, you must use Sidebar Organizer v2.0.0+.
  • For older Home Assistant versions, stick with v1.4.0 or earlier.
  • This version is not backward compatible with Home Assistant versions before 2025.5.0.

Full Changelog: Comparing v1.4.0...v2.0.0 · ngocjohn/sidebar-organizer · GitHub

1 Like