NavBar card v0.10.1

Styling fixes

This new navbar release brings just a couple of hotfixes related to navbar styling.

Fixes

• Fix mobile class not being applied to navbar-popup element.
• Fix ripple effect sometimes getting stuck in active state.

NavBar card v0.10.0

Just one simple but highly requested change to navbar-card with this release: navigate-back custom action 🙂

navigate_back action

As some of you requested, this new release adds support for a new custom action: navigate-back. Simply add a new route, choose a fancy back button icon, set the new action type, and voilà! Back button functionality baked into your custom navigation bar!

type: custom:navbar-card
...
routes:
  - icon: mdi:chevron-left
    tap_action:
      action: navigate-back
  ...

NavBar card v0.9.0

Welcome to release 0.9.0 of navbar-card! This one comes with a handful of new features 🎊

Support for double_tap_action

With this new release, both routes and popup items can be configured to react to double click events, using the double_tap_action field.

type: custom:navbar-card
routes:
  - icon: mdi:label
    double_tap_action:
      action: open-popup
    tap_action:
      action: toggle-menu
    popup:
      - icon: mdi:cog
        label: Settings
        url: /config/dashboard

Ripple effect for buttons

Minor change, but a much needed improvement, is the addition of ripple effect for clickable elements in navbar-card.

Support for toggle-sidebar on all actions

In the previous release, support for a custom toggle-sidebar action was added for tap_action events. As of this new release, toggle-sidebar is supported for tap_action, hold_action and double_tap_action

ESC key to close popup

Another minor but useful change, is the addition of a listener for ESC keys, when a popup is open. Allowing for easier interaction with navbar-card on desktop devices.

---

All changes in this release

• Added support for double_tap_action
• Ripple effect for buttons
• Support for toggle-sidebar on all actions (closes #52 )
• ESC key to close popup
• Improvements on configuration checking
• Refactor event handling logic

NavBar card v0.8.0

This new release of navbar-card brings two new features.

New custom action toggle-menu

@dpeter99 contribution allows users to now toggle the native HA side menu directly from navbar-card. To do so, use the new custom toggle-menu action on your route configuration.

type: custom:navbar-card
...
routes:
  ...
  - url: /lovelace/lights
    icon: mdi:lightbulb-outline
    tap_action:
      action: toggle-menu   # Will open the native HA side menu

More granular configuration for show_labels

Other small but useful feature, is the ability to better customize when to show or hide labels in navbar-card. Theshow_labels option has been modified to accept, apart from a boolean, two new values:

• popup_only: to display the labels only in the popup items
• routes_only: to not display the labels on popups, and display only in the main navbar-card routes

type: custom:navbar-card
desktop:
  show_labels: popup_only
routes:
  ...

---

All changes in this release

• New toggle-menu config option (@dpeter99)
• More options for show_labels config (closes #46 )

NavBar card v0.7.0

Add your custom images to each route

This new release comes with a small but useful feature. The ability to add your own custom images to replace the icon of a given route. Easiest way is to store your custom images in the <config>/www folder of home assistant, and then reference said images with /local/<image_name>.

type: custom:navbar-card
...
routes:
  ...
  - url: /config/automation/dashboard
    image: /local/your_image.jpg

---

All changes in this release

• New configuration option to add custom images to each route. (closes #18)

NavBar card v0.6.1

Minor fixes

This new navbar release brings just a couple of hotfixes related to navbar centering and badges on popup items.

Fixes

• Fix navbar not being properly centered on desktop devices, using position bottom. (closes #43 )
• Fix badge templating not working on popup items.

Full Changelog: v0.6.0...v0.6.1

NavBar card v0.6.0

New open-popup action

⚠️⚠️⚠️ Warning! This release contains breaking changes for existing popup configurations.

This release introduces a new action in lovelace-navbar-card, that allows the user to manually trigger the opening of a configured popup instead of automatically opening it when tapping a route.

This also comes with a minor breaking change, where submenu configuration for routes, has been renamed to popup. To open these popups, you now need to use the open-popup action in either the tap_action or hold_action.

Migration should be quite simple though:

# Old configuration
- icon: mdi:dots-horizontal
  submenu:
    - icon: mdi:cog
      url: /config/dashboard

# New configuration
- icon: mdi:dots-horizontal
  tap_action:
    action: open-popup           # add the custom `open-popup` action to open the popup
  popup:                         # change `submenu` to `popup`
    - icon: mdi:cog
      url: /config/dashboard

---

All changes in this release

• New custom action open-popup to manually open popups. (closes #36 )
• Deprecate submenu option in favor of popup.
• Slightly improved hold_action detection.

Full Changelog: v0.5.1...v0.6.0

NavBar card v0.5.1

All changes in this release

Fixes

• Fix popups not working in iOS devices. (closes #29)

Full Changelog: v0.5.0...v0.5.1

NavBar card v0.5.0

New selected option for each route

With this new release, I've introduced an optional new configuration item for each route. You can now choose whether or not to show one route as selected via JS templates.

This new option plays nicely with anchor-card, as mentioned in #27

type: custom:navbar-card
...
routes:
  ...
  - icon: mdi:home-outline
    icon_selected: mdi:home-assistant
    url: /lovelace/home?anchor=map
    label: Home
    selected: |
      [[[
        const matchesPath = window.location.pathname == "/lovelace/home"; 
        const hasAnchor = window.location.search.includes("anchor=map");
        return matchesPath && hasAnchor;
      ]]]

---

All changes in this release

• New optional selected config for each route. #27
• Fixed centering of navbar in desktop devices. #30

Full Changelog: v0.4.0...v0.5.0

NavBar card v0.4.0

Custom Long press actions

In this new release of navbar-card, I've added support for customizing the long press actions for each route of the card. Same as tap_action, simply add a new entry hold_action to your route, following the Home Assistant docs specifications.

type: custom:navbar-card
...
routes:
  ...
  - icon: mdi:devices
    url: /lovelace/devices
    label: Devices
    hold_action:
      action: navigate
      navigation_path: /config/devices/dashboard

---

All changes in this release

• New hold_action config option for each route. (#26 )
• Added haptic feedback on click, when a route has custom tap_action or submenu configured.

Full Changelog: v0.3.1...v0.4.0