joseluis9595/lovelace-navbar-card v1.0.0

NavbarCard v1.0.0

on GitHub

Hello everybody! I'm excited to announce navbar-card 1.0.0! 🎉 This release is marked by the new visual editor, now fully out of pre-release, making creating and customizing your navbar-card easier than ever.

We’ve also improved the media player, added support for actions with custom JS code, and fixed several small bugs.

Visual editor

Say goodbye to YAML! navbar-card now comes with a visual editor right in your Home Assistant dashboard. This powerful new editor lets you:

• Configure every option using intuitive inputs and switches.
• Drag & drop to reorder routes and popup items.
• Toggle the use of JSTemplates for fields that support templating.

The editor is still evolving, but it already makes editing your navbar-card easier, faster, and much more visual.

New album_cover_background option

A new cool addition to the media player widget: it now supports showing a blurred version of the current album cover as its background. Configure it by enabling the album_cover_background option under the media_player configuration.

Custom JS actions

For those of you with more programming experience, and who feel like the actions on navbar-card are limited, I've got great news. You can now use the new custom-js-action action, to run your own Javascript code when interacting with a route or popup item.

type: custom:navbar-card
...
routes:
  - icon: mdi:menu
    tap_action:
      action: custom-js-action
      code: |
        [[[
          const newURL = window.location.href + "#bubble-popup";
          history.replaceState(null, "", newURL);
          window.dispatchEvent(new Event('location-changed'));
        ]]]

Support for JSTemplate on a route popup

Thanks to @simply-justin, the popup field of each route now supports JSTemplate.
You can use it to render different popups depending on entity state, conditions, or any custom logic you need.

type: custom:navbar-card
...
routes:
  - icon: mdi:sofa-outline
    icon_selected: mdi:sofa
    label: Rooms
    tap_action: { action: open-popup }
    popup: |
      [[[
        return Object.values(hass.areas).map(area => ({
          label: area.name,
          url: "/d-bubble/home#" + area.area_id,
          icon: area.icon
        }));
      ]]]

All changes

• New visual editor for navbar-card.
• New album_cover_background option for media_player. (closes #161 )
• Added support for custom Javascript actions. (closes #145 )
• JSTemplate for popup configuration. Thanks @simply-justin ! (closes #163 )
• Fix overflow on labels. (closes #158 )
• Fix overflow on media_player with long media titles.

⭐ 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! 🙌