Custom Lovelace
plugin that allows you to rearrange, hide, and add Home Assistant sidebar menu items.
-
Copy the contents of
www/
to<your config dir>/www/
. -
Add in
configuration.yaml
:
frontend:
extra_module_url:
- /local/custom_sidebar/custom_sidebar.js
Configuration requires a file called sidebar-order.json
which needs to be created in <config directory>/www/custom_sidebar/
.
For full example see this: https://raw.githubusercontent.com/wwwescape/custom-sidebar/main/example/sidebar-order.json
Also check the original custom-sidebar README for explanations.
Short example:
{
"order": [
{
"new_item": true,
"item": "Google",
"href": "https://www.google.co.in/",
"icon": "mdi:google",
"target": "_blank",
"order": 5
},
{
"item": "overview",
"order": 1
},
{
"new_item": true,
"spacer": true,
"order": 2
},
{
"new_item": true,
"spacer": true,
"divider": true,
"order": 4
},
{
"new_item": true,
"item": "Integrations",
"href": "/config/integrations",
"icon": "mdi:puzzle",
"order: 3
},
{
"new_item": true,
"item": "Gmail",
"href": "https://www.gmail.com/",
"icon": "mdi:gmail",
"target": "_blank",
"order": 6,
"desktop_only": true
},
]
}
2 new options are introduced that allows added a spacer element or a divider element to the sidebar.
Name | Type | Requirement | Description |
---|---|---|---|
spacer | boolean | Optional | Set to true to a spacer element. |
divider | boolean | Optional | Set to true to a divider element. Required spacer to be set to true . |
desktop_only | boolean | Optional | Set to true to not show the element on the mobile app. |
- Items with
hide: true
are not considered in new order. - All items will be ordered according to their (optional)
order
property OR in the order of appearance in config.order. - If using the
order
property, make sure either all items (except hidden) have this property, or none of them (otherwise order may be messed up). - Any items present in the sidebar, but not in config.order, will be shown on the bottom of the top part of the list
- When using Exceptions, pay attention to "base_order" property - if it's set to "false", the main config.order will be ignored, leaving you with default sidebar (which now should be modified with the exception's order)
- Yes, this works on mobile (for now atleast) too!
You can define user-specific order using exceptions
feature (see details in original repo)
{
"exceptions": [
{
"user": ["Jim Hawkins", "Long John Silver"],
"order": [
...
]
}
]
}
If you use Home Assistant's iframe Panel and have some iframe_panel links configured in configuration.yaml
panel_iframe:
router:
title: "Router"
url: "http://192.168.1.1"
icon: mdi:router-wireless
fridge:
title: "Fridge"
url: "http://192.168.1.5"
icon: mdi:fridge
you can reorder iframe links, same as regular ones, in sidebar-order.json
:
{ order: [
{ "item": "fridge" },
{ "item": "overview" },
{ "item": "router" }
...
]}
Check out Home Assistant's "native" sidebar tools - quite possibly, it will be enough for your needs.
This work is heavily based on by custom-sidebar Villhellm and custom-sidebar-v2 by Pasha Golovin. Thank you!