Liquid Lens Navbar Card — an iOS 26 "Liquid Glass" bottom nav for your dashboard

Share your Projects! Dashboards & Frontend
,
1

Hey everyone,

I built with help from AI a bottom navbar card with an iOS-26-style "liquid glass" lens that
follows your finger as you drag across the bar — plus per-route status
dots and live-templated icon colors. Wanted to share it in case it's
useful to anyone else.

What it does:

  • A frosted glass lens tracks your finger as you swipe across the bar,
    with a soft light-refraction fringe at the edges
  • Icons switch popups live as the lens passes over them — no need to
    lift your finger, just drag and let go on whatever you want
  • Optional colored status dots per route (e.g. "is any vacuum running?"),
    each driven by its own JS template against live entity states
  • Same templating for icon color itself
  • Light haptic pulse as the lens crosses into a new icon (native on the
    Companion App, navigator.vibrate fallback in-browser)
  • Theme-aware icon color (light/dark)

Built and tested against a sections-type dashboard, alongside Bubble
Card pop-ups as navigation targets (hash-based navigation, so it should
work with any hash-driven popup system, not just Bubble Card).

Honest limitation: it's blur/saturation/brightness plus a bit of
faked chromatic fringing to suggest glass refraction — true pixel-level
distortion (feDisplacementMap) didn't render reliably in the Companion
App's WebView when I tested it, so I dropped it rather than ship
something that only half-works.

GitHub: GitHub - donsebby/liquid-lens-navbar-card · GitHub

Install via HACS as a custom repository (category: Dashboard), or manual
install — instructions in the README.

Happy to hear feedback / ideas, and if anyone finds bugs, issues on the
repo are open.

2 Likes
2

Wow!! This looks really amazing and great design pal!

Is it possible to provide the glass effect yaml? I just want to try to achive this for Tile cards background.

1 Like
3

Hey,

thank you very much :slight_smile: its my first project and im very happy that you like it.
You'll need card-mod installed for this to work, since Tile cards don't have a built-in style option
Here is the card-mod-snippet:

type: tile
entity: light.example
card_mod:
  style: |
    ha-card {
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(12px) saturate(180%);
      -webkit-backdrop-filter: blur(12px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    }

Does this help you?

2 Likes
4

Yes very much, looks great!!

5

I would love to see what you did with it. Do you mind to share it here?

6

Hi,

I just tested the look on tile cards. I have set up a background for my dashboard and looks now good with the glass effect.

I have installed your nav bar, but once it is set up it is difficult to adjust it as it disappears from the dashboard when in edit mode.

7

Same issue here, after the card has been placed it sits on the bottom in edit mode and there is no way to access it except via dashboards raw editor.

Update: In the Editor it is there right below your last card but it’s invisible until you hover it.

8

Ya i have a Theme where i can see atleast a bar. I can look into a fix later.

10

Version 1.1.0 is up with fixed Edit Mode :slight_smile:

11

Working, thank you.

12

Sorry. 1.2.0 is up because i got triggered by the not full centered lense :smiley: this is now the case

13

I’d like to use an icon based on the recent weather condition which opens a weather-popup.
But the JS template seems not to work for the icon.

Is there a work-around?
The most perfect way would be the use of the weather entity (or any other entity) to drive the icon.

14

Great many thanks.

Is it possible to add also adjustment of icon size and icon space? Icons are close to each other on certain screens making it difficult to press the correct one.

15

I can try to implement it in the near future but sadly not in the next days. I will write it on my todo’s though

1 Like
16

Good point. I will look into this in the next days.

17

You are the best. Many thanks again

18

1.3.0 is up. Can you test it please?

19

Hi,

Yes for sure but I dont see any settings other than what I had already. Can you elaborate please what to test exactly and any yaml code to insert? Also I have noticed no notification available for the card to update in HA (available update not showing for this card)

20

Hi,

sorry im kinda new to the game :smiley: i added some lines to the yaml in github so you can check it there. I also added a release Version and Tag so HACS should be see a update now.

21

@RS53 and @nightfever v1.4.0 is out and covers both of these:

Weather-driven icon: icon now supports the same [[[ ... ]]] JS template syntax that icon_color already used — so the icon symbol itself can react to entity state, not just its color:

icon: "[[[ const c = states['weather.home'].state; if (c.includes('rain')) return 'mdi:weather-rainy'; if (c.includes('cloud')) return 'mdi:weather-cloudy'; return 'mdi:weather-sunny'; ]]]"

Any entity works, not just weather — same template rules as icon_color (README has more examples under “Templates”).

Icon size / spacing: this is now available directly in the visual card editor — open the card in the dashboard UI (no YAML needed) and you’ll find sliders for icon size, gap between icons, tap target size, and lens width. routes itself (icons, labels, actions, templates) still goes through YAML, since that part doesn’t map cleanly onto a form.

Update via HACS should show v1.4.0 available now. Let me know if either of these doesn’t behave as expected!

1 Like