NavbarCard v1.6.1

Minor release with a couple hotfixes:

• Fixed error where navbar-card would display behind the native HA drawer on versions >= 2026.6 (closes #306 )
• Fixed an issue when using Music Assistant, where the media widget's blurred background did not use the media player's artwork. (@MelvinSnijders )

NavbarCard v1.6.0

This new release of navbar-card comes with a few visual editor improvements, media player fixes, and small UX tweaks.

Visual editor improvements

Some fields in the visual editor were already configurable using JS templates, but they did not have a simple visual switch to turn them on or off.

Routes selected and hidden, and media_player.show, now include visual switches while still keeping the option to use JS templates when needed.

This release also fixes an issue where empty JStemplate strings could be left out in the card configuration when using the visual editor.

Template overrides

When using a template, overridden values can now be removed directly from the visual editor.

This should make template-based setups easier to manage, especially when testing local changes on a single navbar-card instance and then wanting to fall back to the template value again.

Popup animation improvements

Popup animations now adapt their speed based on the amount of popup items. The more items a popup has, the faster each individual item animation will be, keeping larger popups from feeling too slow.

Scroll to top when re-clicking current route

Clicking the currently selected route again will now scroll the page back to the top.

Media player fixes

This release fixes an issue where the media player icon was not being displayed correctly when using Music Assistant.

---

All changes in this release

• Added visual editor switches for the selected and hidden props of each route (closes #280)
• Fixed empty templates being left out in the configuration of the card when using the visual editor (closes #288)
• Added UI toggle switch for media_player.show
• Fixed media player icon not being displayed when using Music Assistant (closes #291)
• Added a new button in the visual editor, to remove overridden settings when having a template configured (closes #258)
• When opening popups, increase animation speed based on number of popup items. That means, the larger the amount of items, the faster the animation per-item will be (closes #292)
• Page now scrolls to the top when re-clicking the current route (closes #293)

---

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

NavbarCard v1.5.0

Caution

Breaking change!
This new release of navbar-card introduces a breaking change in the media_player configuration, but for a good reason:

Support for multiple media players

As many of you have requested, this release brings support for configuring multiple media player entities in the media_player widget of navbar-card 🙂 All active media players will be displayed as a draggable list, with a custom show property for each one, letting you manually control when each of them is displayed.

This improvement comes with a breaking change: any users who had previously configured the media_player widget will need to migrate to the new configuration syntax. If your media_player config looked like this:

type: custom:navbar-card
...
media_player:
    entity: media_player.your_media_player
    album_cover_background: true
    tap_action:
        action: navigate
        navigation_path: /media

You will need to migrate to the new syntax, which should look something like this:

type: custom:navbar-card
...
media_player:
  players:
    - entity: media_player.test_media_player
      tap_action:
        action: navigate
        navigation_path: /security
  album_cover_background: true

You can find all info regarding the media_player widget configuration in the docs.

Fix media player auto_padding

As reported in #141, the auto_padding feature was not working correctly when the media player transitioned from hidden to visible. This has been fixed in this release.

---

All changes in this release

• Added ability to configure multiple media players, with drag support to navigate between them. (closes #141 )
• Apply media player auto-padding immediately on visibility change without requiring page reload. (closes #281 )
• Bump dependencies

---

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

NavbarCard v1.4.0

Hey everyone! After a longer-than-expected break, navbar-card is back with a new release. Sorry for the wait, and thanks for your patience! 🙏

Fix for the visual editor on HA 2026.1+

If you've updated to Home Assistant 2026.1 or later, you may have noticed that the visual editor was broken — certain dropdowns simply wouldn't render. This was caused by ha-combo-box being removed from the HA frontend in that version.

For now, affected fields fall back to a native HTML <select> element to restore functionality. It's not the prettiest solution, but it gets the job done. I'll look into replacing it with a proper HA-native element in future releases.

New configuration options for the media player widget

The media player widget can now display custom title, subtitle, and icon values, overriding the ones pulled from the entity state. This is useful for entities or integrations that do not provide either the name of the media currently being played, or the image of the album.

All three fields support JSTemplates, so you can make them dynamic too:

type: custom:navbar-card
media_player:
  entity: media_player.living_room
  title: Living Room
  subtitle: |
    [[[
      return states["media_player.living_room"].attributes.media_title ?? "Nothing playing";
    ]]]
  icon: mdi:speaker

Relative URL support for routes

Routes now accept relative URLs, so you no longer need to know the full absolute path for every dashboard view. The active state of each route is also resolved correctly, if the current URL matches the relative path, the route will appear selected as expected.

type: custom:navbar-card
routes:
  - url: home       # resolves relative to the current dashboard
    icon: mdi:home
    label: Home
  - url: ../lights  # navigate up and into another view
    icon: mdi:lightbulb-outline
    label: Lights

quickbar action now works without a mode

The quickbar custom action previously required a mode parameter (entities, devices, etc.) to function. You can now omit mode entirely to open the default Home Assistant "Quick search" dialog, with no filters applied, the same one you'd get from pressing ctrl+k in HA.

type: custom:navbar-card
routes:
  - icon: mdi:magnify
    label: Find
    tap_action:
      action: quickbar

---

All changes in this release

• The annoying "stale" workflow now only targets issues labeled as "More info needed". Really sorry for that :(
• Add new title, subtitle and icon options for the media player widget. (closes #268)
• Add support for relative URLs for each route in navbar-card. (closes #245)
• Fix missing ha-combo-box on the UI editor for Home Assistant versions newer than 2026.1 (closes #267)
• Custom action quickbar can now be used with no mode parameter, to open the default Home Assistant "Quick search" dialog without filters applied. (closes #271)
• Bump dependencies

---

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

NavbarCard v1.3.0

Merry Christmas everyone! 🎄

It’s been a while since the last release, but I’m happy to share a new update today. Development has been a bit slower lately, though releases should start coming more regularly again from now on. This update includes a few small but useful improvements, plus...

Media player for desktop

A highly requested feature: media player widget can now be displayed on desktop devices 🎉 Use the new media_player.desktop_position configuration to choose where media players appear.

Tip

Want to keep using it only in mobile? Just disable it using the show prop of media_player:

type: custom:navbar-card
...
media_player:
  show: |
    [[[
      return !navbar.isDesktop;
    ]]]

New desktop.mode config

A new mode option is now available for the desktop configuration, matching what already exists for mobile.
This allows navbar-card to be displayed as either docked or floating on desktop devices as well.

Editor fixes

This release also includes a couple of fixes for the visual editor.

First, the switches under the haptic section were not correctly reflecting the user’s current configuration. This has now been fixed.

Additionally, the routes editor has been improved: the URL field is now a native Home Assistant URL picker instead of a plain text input, making route selection quicker and less error-prone 🙂

---

All changes in this release

• Replace URL text input in the editor, with the native HA URL picker. (closes #242)
• Fix default haptic values not being properly displayed on the visual editor. (closes #239)
• Added new desktop.mode configuration, to match mobile.mode. Valid values are either docked or floating. (closes #234)
• New media_player.desktop_position configuration to be able to render the media player widgets on desktop devices. (closes #243)
• New auto_layout.media_player_px setting to configure padding added when media player widget is visible.
• Revamp of the Examples section of the docs.

---

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

NavbarCard v1.2.1

All changes on this release

• fix: hold_action not triggering with open-popup action. (closes #227 )
• fix: media player buttons not being displayed

---

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

NavbarCard v1.2.0

Hope you all had a great (and spooky 👻) Halloween! NavbarCard v1.2.0 is here with some new cool features: improved performance, redesigned docs and new customization options.

New docs

After listening to your feedback, the documentation has been completely redesigned. The old, lengthy README has been replaced with a dedicated docs site built using Docusaurus. The new site includes search functionality, organized sections, navbar-card showcase examples with full yaml code and guides to help you get started faster. You can check out the new docs here.

New selected_color property for each route

You can now customize the active color of each route! The new selected_color attribute lets you define the color shown when a route is selected, giving your navbar a more personalized touch.

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    selected_color: "#E57373"
    selected: true       # hardcoded to true for demo purposes
  ...

Performance issues

Several users reported memory leaks and lag, especially on tablets running in kiosk mode where dashboards remain open for long periods. This release includes fixes and optimizations that should significantly reduce performance issues and improve responsiveness.

Entity picker in toggle and more-info actions

This one is a small, but useful feature. When selecting either toggle or more-info action in the UI editor, a new entity picker will be displayed, to choose which entity to target for said actions.

---

All changes in this release

• feat: new docs using docusaurus.
• fix: memory leaks on navbar-card components. (closes #215, closes #225)
• feat: new selected_color attribute for each route, to modify its "active" color. (closes #220 )
• fix: show_popup_label_backgrounds for mobile not working on the UI editor. Thanks @shbatm (closes #221 )
• feat: add entity picker for toggle and more-info panels in the UI editor.
• fix: renamed badge.textColor to badge.text_color.

---

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

NavBar card v1.2.0-beta4

• fix open-popup action not working when a route has both tap_action and double_tap_action.
• close popup after clicking on any popup item.

NavBar card v1.2.0-beta3

• Fixed performance issues causing slowdowns on older devices.

NavBar card v1.2.0-beta2

• Fixed performance issues causing slowdowns on older devices.