VietNgoc
March 3, 2025, 1:44pm
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.
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.
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
🗄️ Home Assistant custom plugin designed to give you full control over the layout and organization of the sidebar.
6 Likes
Zenia
March 3, 2025, 5:21pm
2
Thank you for this great add on to our dashboard projects. Really useful .
How to get rid of empty space between a main information and groups?
Is it possible to relocate groups to the bottom of the side bar?
VietNgoc
March 3, 2025, 5:38pm
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
Zenia
March 6, 2025, 6:13pm
5
Hello again. I have another crazy idea
- 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.
VietNgoc
March 15, 2025, 4:12pm
6
1 Like
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.
