joseluis9595/lovelace-navbar-card v1.1.0 on GitHub

This release of navbar-card comes packed with new features and resolves long-standing bugs. Highlights include customizable icon colors, a new logout action, reflect_child_state option for popups, and customizable actions for the media player widget, as well as fixes for the visual editor and misclicks in the UI, especially on mobile devices.

New `logout` action

Some users run navbar-card as a complete replacement for the native Home Assistant navigation UI. In those setups, an important feature was missing: the ability to log out the current user.

Thanks to @simply-justin, this release adds a new custom action logout so you can easily provide a logout button directly in your navigation.

Configurable icon colors

This release also introduces a much requested feature for navbar-card: icon color customization. With this new functionality, you can permanently change the color of each icon of navbar-card, also supporting JSTemplates to configure it.

This release also includes a much-requested feature: you can now customize the color of individual icons in navbar-card. Icon colors support static values and JS templates, so you can change them dynamically based on state or logic.

type: custom:navbar-card
...
routes:
  - url: /lovelace/home
    icon: mdi:home
    icon_color: |-
      [[[
        if (states["binary_sensor.main_door"].state == "on") {
          return "#ff0000";
        } else {
          return null;
        }
      ]]]

New `reflect_child_state` configuration

Another great addition from @simply-justin: you can now configure a parent route to be marked as selected whenever any of its popup items are selected.

Enable this behavior with the new layout.reflect_child_state option:

type: custom:navbar-card
layout:
  reflect_child_state: true

Customizable actions for the media player widget

The media player widget now supports custom actions.

Previously, clicking the widget always opened the more-info dialog of the media_player entity. With this release, you can override that behavior by configuring tap_action, hold_action, and double_tap_action individually.

All changes

Added

Add support for tap_action, double_tap_action and hold_action for the media player widget. (closes #174 )
@simply-justin Added new logout action that logs out the current user from Home Assistant. (closes #166 )
@simply-justin New config option reflect_child_state to display one route as selected if any of its popup items is also selected (closes #167 )
New available config option icon_color for each route (closes #126 #186 )

Fixed

Fixed bug where the action picker in visual editor didn't allow configuring the action field when selecting a "Home Assistant action" (closes #188 )
When clicking a route an navigating to a new URL, sometimes the original click event was fired again in the destination page, causing misclicks in the UI (closes #197 )
Bump z-index to 7 to prevent collision with other custom cards (closes #180 )
Fixed issue where labels appeared cropped when using show_popup_label_backgrounds option (closes #190)
@simply-justin Prevent hold_action and double_tap_action from not being triggered on popup items
Display a fallback icon when the media player entity does not provide a valid entity_picture
Fixed badge positioning
Overriding configuration from the template for a given instance of navbar-card, now merges data correctly instead of replacing values.

Internal

@simply-justin Modularized navbar-card: Split the monolithic src/navbar-card.ts into focused modules to address the “GOD file” smell.
Improved performance of visual editor

⭐ Support `navbar-card`

If you enjoy using navbar-card and want to support its continued development, consider buying me a coffee (or a beer 🍺), or becoming a GitHub Sponsor!

Your support means a lot and helps keep the project alive and growing. Thank you! 🙌

joseluis9595/lovelace-navbar-card v1.1.0 NavbarCard v1.1.0 on GitHub

New logout action