Sidebar Default | Sidebar organized | Collapsed groups | Expanded |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
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.
With Sidebar Organizer, managing the sidebar in Home Assistant becomes easy and flexible. Whether you want to declutter your sidebar or create a more streamlined view, Sidebar Organizer is here to help.
- 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.
HACS (Home Assistant Community Store)
- Go to HACS page on your Home Assistant instance
- Add this repository via HACS Custom repositories How to add Custom Repositories
https://github.com/ngocjohn/sidebar-organizer
- Select
Dashboard
- Press add icon and search for
Sidebar Organizer
- Select Sidebar Organizer repo and install
- Force refresh the Home Assistant page
Ctrl
+F5
/Shift
+โ
+R
- Add sidebar-organizer to your page
Click to expand installation instructions
- Download the sidebar-organizer.js.
- Place the downloaded file on your Home Assistant machine in the
config/www
folder (when there is nowww
folder in the folder where yourconfiguration.yaml
file is, create it and place the file there). - In Home Assistant go to
Settings->Dashboards->Resources
(When there is noresources
tag on theLovelace Dashboard
page, enable advanced mode in your account settings, and retry this step). - Add a new resource:
- Url =
/local/sidebar-organizer.js
- Resource type =
module
- Url =
- Force refresh the Home Assistant page
Ctrl
+F5
/Shift
+โ
+R
. - Add sidebar-organizer to your page.
-
Access the Sidebar Organizer Configuration menu by press and hold the Profile menu (the last item in the sidebar).
-
The settings menu is divided into three categories: Appearance, Panels, and Raw Code. Below is a breakdown of what you can customize in each section.
- Header Title: Change the header title.
- Hide Header Toggle: A button that allows you to quickly toggle between expanding or collapsing the sidebar groups.
You can set different styles for Light and Dark modes by specifying the following settings:
-
Line Color: The color of the divider line between sidebar items.
-
Background Color: The background color of the divider area in the sidebar.
-
Border Top Color: The color for the top border of the sidebar divider.
-
Scrollbar Thumb Color: Customize the color of the scrollbar's thumb for the sidebar.
-
Sidebar Background Color: The overall background color for the sidebar.
-
Border Radius: Customize the corner rounding for the divider. You can specify a numeric value for how rounded the corners of each panel should appear.
All stylization is visible in the preview.
Yaml example
header_title: 'My sidebar' hide_header_toggle: false color_config: border_radius: 8 light: divider_color: '#dddddd' background_color: '#ffffff' border_top_color: '#e0e0e0' scrollbar_thumb_color: '#cccccc' custom_sidebar_background_color: '#f5f5f5' dark: divider_color: '#444444' background_color: '#333333' border_top_color: '#555555' scrollbar_thumb_color: '#666666' custom_sidebar_background_color: '#222222'
In this section, you can organize the layout of the sidebar panels by customizing how items are displayed. The following options are available:
-
Bottom Items: Select the items that will be fixed at the bottom of the sidebar, allowing you to easily access frequently used panels.
-
Custom Groups: Organize your sidebar items into custom groups for better clarity and navigation. You can create, rename, and reorder these groups based on your preferences.
-
Default Collapsed: Choose which groups will be collapsed by default when the sidebar loads, helping to reduce clutter and create a cleaner interface.
Bottom Panel Group Sorting Group items setting Yaml example
bottom_items: - config/lovelace/resources custom_groups: dashboards: - extra-menu - ha-dash - dashboard-moon - test-cards - uni-vehicle - dashboard-vehicle lovelace_yaml: - lovelace-test-yaml - ytube-card components: - browser-mod - config/integrations media: - media-browser system: - calendar - energy - history - logbook - todo default_collapsed: - system - dashboards - components
-
This section lets you edit the raw YAML configuration file used by Sidebar Organizer. You can also download the current configuration as a YAML file, which should be saved in the
www
folder with the namesidebar-organizer.yaml
. -
This file is useful for synchronizing your sidebar settings across multiple devices. For instance, if you have a companion app and want to apply the same sidebar setup without repeating the entire process, you can enable the option to use the YAML config file in the app. This ensures the sidebar layout will be consistent with the configuration from the YAML file.
ยฉ 2025 Viet Ngoc