This is an automated archive made by the Lemmit Bot.
The original was posted on /r/homeassistant by /u/ElChiniNet on 2025-05-24 15:22:14+00:00.
If you didn't see the first part of this article: 10 cool things that most probably you don’t know about Custom Sidebar HACS plugin, check it here.
Custom Sidebar repository
Custom Sidebar HACS plugin
- Hide All option
==================
When you are going to create a configuration for a user, one possible approach is to start hiding the items that this user doesn't need. But what happens when we want to hide everything and just display a few items for that user? It would be a hassle to write item by item with a hide property in true. It is better if we hide everything and just show what we want visible.
In this situation, the hide_all option is handy, it hides all the items in the sidebar, so you can unhide just the items that you want to show.
hide_all: true
order:
- item: dashboard
hide: false
- item: map
hide: false
- Complex Exceptions Matchers conditions
=========================================
It is possible to add multiple matchers to an exception (user, not_device, is_admin, etc). By default if at least one of the matchers matches, the exception will be picked, that is to say, the conditions of the matchers are by default OR conditions. But it is possible to change this behaviour.
matchers_conditions is an optional parameter of an exception (by default its value is OR). It allows to define how the matchers conditions behave and if its value is AND, all the matchers should match for the exceptions being picked. For example, the next example will show the configuration under the exception for all admin users that are not using an iPhone excluding the user ElChiniNet.
exceptions:
- is_admin: true
not_device: 'iPhone'
not_user: 'ElChiniNet'
matchers_conditions: 'AND'
order:
item: 'dashboard'
hide: true
- Divide items per sections
============================
Sometimes, if we end with a sidebar with a large amount of items, it would be useful to visually separate them in groups taking into account their context. In this situation, the divider order-item property becomes a handy feature.
Setting this property in true will add a divider below the sidebar item. It will not add a new DOM element, but a pseudo element that will visually act as a divider with the items placed after it.
order:
- item: 'overview'
order: 1
- new_item: true
item: 'Lights'
icon: 'mdi:lightbulb-group'
href: 'lights/woonkamer'
order: 2
- item: 'energy'
order: 3
divider: true
- item: 'developer'
order: 4
- item: 'settings'
order: 5
divider: true
...
Sidebar with dividers using the divider boolean option
- Hide or show items depending on the state of an entity
=========================================================
Since some time already, it is possible to add templates to the hide property of the order items. This means that it is possible to show or hide items when the state of an entity changes.
We can have an input_boolean that when it is on off, some items of the sidebar remain hidden and when we switch it on, then they get visible.
js_variables:
admin_boolean: 'input_boolean.show_admin_sidebar_items'
partials:
admin_active: |
const adminActive = is_state(admin_boolean, 'on');
return !adminActive;
order:
- item: developer tools
hide: '[[[ @partial admin_active ]]]'
- item: settings
hide: '[[[ @partial admin_active ]]]'
Show or hide items depending on the state of an entity
- Default dashboard
====================
Sometimes it is useful to make a user land on a specific dashboard when Home Assistant is loaded. To achieve this, you can go to your profile and in the Browser settings there is a specific section to set the default dashboard in that device. But as the description states, this change will be only applied in that device and it is not permanent. This change will be lost if one logs-out and logs-in again or if one logs-in in another device with the same user.
On top of this, this feature only allows to set certain dashboards, as the default one, the ones created manually or other specific dashboards as the Map Dashboard. If one wants to land in any other Home Assistant url when the system loads, that is not natively possible.
With the default_path option you can make Home Assistant loads a specific URL path every time that it loads, and using exceptions, it is even possible to make these changes for specific users or devices, or create custom matcher conditions. These changes will be permanent as long as you keep them in the configuration.
For example, the next code example shows how to create a default URL path for every user and another one for admins.
default_path: '/generic-dashboard'
exceptions:
- is_admin: true
default_path: '/lovelace'
The default_path option will change the default behaviour and every time that the page loads it will navigate to this path (either when the page loads for the first time or when it gets refreshed). If you don't want to have this behaviour and you would prefer to load Home Assistant in an specific path or refresh a specific page without being redirected to the default_path, then you should not set this option.
- Execute services clicking on sidebar items
=============================================
Since the beginning it is possible to assign the href of a sidebar item specifying this property. This property is useful if one wants to go to a dashboard or open an external website when clicking on sidebar items. But since some time, it is also possible to execute a Home Assistant Service (renamed recently to Actions) if we specify the correct action in the on_click property of a sidebar item.
Turning on or turning off a light, reload automations, reload templates, restart Home Assistant among much others, are just some services examples that you can execute just clicking on a sidebar item using this feature. Let's check a very practical example, imagine having a sidebar item that once clicked toggles a light.
order:
- new_item: true
item: 'Kitchen lights'
icon: |
[[[
return is_state('light.kitchen_lights', 'on')
? 'mdi:lightbulb-on'
: 'mdi:lightbulb';
]]]
icon_color: |
[[[
return is_state('light.kitchen_lights', 'on')
? 'var(--accent-color)'
: 'var(--sidebar-icon-color)';
]]]
on_click:
action: 'call-service'
service: 'light.toggle'
data:
entity_id: 'light.kitchen_lights'
Call service action in the on_click property of a sidebar item
- Reactive variables
=====================
Since some time already, it is possible to use reactive variables in the JavaScript templates. Reactive variables are just local variables, they trigger a re-render of the templates that are using them just in the device in which they are being changed. For example, one situation in which reactive variables can be handy is if we want to show or hide some items of the sidebar if a specific item is clicked, in those cases we want to make this changes locally, not for every user.
js_variables:
admin_items_open: 'ref(false)'
order:
- new_item: true
item: 'Admin Items'
icon: 'mdi:security'
on_click:
action: 'javascript'
code: |
const open = ref("admin_items_open");
open.value = !open.value;
- item: Developer tools
hide: '[[[ return !ref("admin_items_open").value ]]]'
attributes:
data-child: true
- item: Settings
hide: '[[[ return !ref("admin_items_open").value ]]]'
attributes:
data-child: true
styles: |
:host([expanded]) ha-md-list > ha-md-list-item[data-child] {
padding-left: 15px;
}
Show and hide items using reactive variables
- Log sidebar usage in Logbook
===============================
Are you curious to know which sidebar items are the most visited ones among your family members?, or do you want to know if a certain item is visited by your kids? Since some time, there is an analytics option that allows one to log sidebar usage.
It is even possible to know if someone has being playful and has visited a dashboard having the sidebar item hidden for them. Because the analytics option logs sidebar items click...
Content cut off. Read original on https://old.reddit.com/r/homeassistant/comments/1kue40z/other_10_cool_things_that_most_probably_you_didnt/
