Skip to content

๐Ÿ—„๏ธ Home Assistant custom plugin designed to give you full control over the layout and organization of the sidebar.

Notifications You must be signed in to change notification settings

ngocjohn/sidebar-organizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

38 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

hacs Github last commit git-download-all git-download-latest forum

๐Ÿ—„๏ธ Sidebar Organizer

Sidebar Default Sidebar organized Collapsed groups Expanded

Introduction

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.

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.

Installation

HACS (Home Assistant Community Store)

  1. Go to HACS page on your Home Assistant instance
  2. Add this repository via HACS Custom repositories How to add Custom Repositories
https://github.com/ngocjohn/sidebar-organizer
  1. Select Dashboard
  2. Press add icon and search for Sidebar Organizer
  3. Select Sidebar Organizer repo and install
  4. Force refresh the Home Assistant page Ctrl + F5 / Shift + โŒ˜ + R
  5. Add sidebar-organizer to your page

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

Manual

Click to expand installation instructions
  1. Download the sidebar-organizer.js.
  2. Place the downloaded file on your Home Assistant machine in the config/www folder (when there is no www folder in the folder where your configuration.yaml file is, create it and place the file there).
  3. In Home Assistant go to Settings->Dashboards->Resources (When there is no resources tag on the Lovelace Dashboard page, enable advanced mode in your account settings, and retry this step).
  4. Add a new resource:
    • Url = /local/sidebar-organizer.js
    • Resource type = module
  5. Force refresh the Home Assistant page Ctrl + F5 / Shift + โŒ˜ + R.
  6. Add sidebar-organizer to your page.

Usage

Configuration dialog

  • 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.

    Configuration Dialog

Appearance

  • 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.

    Appearance

    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'

Panels

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

Code

  • 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 name sidebar-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.

    Config RAW Code


ยฉ 2025 Viet Ngoc

https://github.com/ngocjohn/

(back to top)

About

๐Ÿ—„๏ธ Home Assistant custom plugin designed to give you full control over the layout and organization of the sidebar.

Topics

Resources

Stars

Watchers

Forks