🧭 Navbar card: easily navigate through dashboards

[AntonH]

Is there a way to pass a CSS variable as a badge color?
I have them with light and dark modes in which the color changes. in order to make the colors match, I don’t want to pass the rgb/hex value, but rather the CSS var.

I’m currently trying it like this:

routes:
  - url: /mobile-development/alarm
    badge:
      color: |-
        [[[const s = states['alarm_control_panel.alarmo'].state;
          if (s.includes('armed_') || s === 'triggered') {
              return "red";                     // <=== this works fine
            } else if (s === "disarmed") {
              return "var(--token-rgb-green)";  // <=== these do not work
              return "--token-rgb-green";  
              return "token-rgb-green";  
            } ]]]

I’m obviously not a CSS/JS guru, but I’ve tried so many variations and LLM suggestions that I’m not sure if it’s even possible.

[derekpurdy (Derek)]

Is there a way to dock the bar in desktop mode as well?

[bjm (Brent (the Other Other Kiwi))]

Hey all, I’m after a bit of help, I want to change the popup to a row of icons rather than the column, I have changed as many “flex-direction” CSS values from column to row as I can find using the styles.ts file as my guide
any help would be greatly appreciated, I’m probably missing something totally easy

FIXED: had to use card_mod

card_mod:
  style: |
    .navbar-popup {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      align-items: center !important;
    }
    .navbar-popup .popup-item {
      margin: 5px !important;
    }

[TripleQ]

Good afternoon,

I’m trying to get the navbar docked on a new table, but the resolution might be to high.

Portrait works find, but landscape it switches to desktop-mode.

Any way I can force “docked” at higher resolutions?

Thanks.

[nemo-gim (nemo)]

Where is @joseluis9595???

[marcel-k]

Hello everyone,

how can I easily display for each room whether a light is on? … I don’t need a counter, I have that in the popup itself.

Here is an example - only it currently doesn’t work for me with this code.

- icon: mdi:floor-plan
        label: Flur EG
        badge:
          show: |
            [[[
             const room = 'Flur EG';
             const lightsInRoom = Object.values(states).filter(entity => 
             entity.entity_id.startsWith('light.') && 
             entity.attributes.area_id === room &&
             entity.state === 'on'
             );
             return lightsInRoom.length > 0 ? 'on' : 'off';
            ]]]
          color: yellow
        tap_action:
          action: navigate
          navigation_path: /smartphone-2025/raume#flur-eg-popup

EDIT:
Okay - sometimes all it takes is a coffee … I’ve now found the badge within the routes in the visual view - great! … but I’m still stuck with this code … can anyone help me? (The lights are of course assigned to the rooms)

- icon: mdi:office-building
        label: Büro 2
        tap_action:
          action: navigate
          navigation_path: /smartphone-2025/raume#buero2-popup
        badge:
          show: |-
            [[[return Object.values(states.light).some(
                e => e.area_id === 'buro_marcel' && e.state === 'on'
            )]]]
          color: yellow

And another edit :-/

I’m completely off track – it’s only meant for a counter, right? It basically needs a counter.

But I don’t need that for the subcategories (rooms)… I just want to see if the light is on or off in that room. Does anyone have an idea how I can represent that visually?

[joseluis9595 (Jose Álvarez)]

Right now it’s not possible to configure this behaviour. But maybe the icons should also change position when the popup is aligned to the right. Just as they do when using show_popup_label_backgrounds set to false.

[joseluis9595 (Jose Álvarez)]

@nemo-gim

Where is @joseluis9595???

Hi @nemo-gim , first of all, sorry for the delay. I’ve been quite busy with personal stuff over the past few months. I’m hoping to have much more free time starting in January.

As for your questions…

@nemo-gim

Is there an option to make the pop-up appear at the bottom instead of at the top?

It looks like you are using custom styles to display the navbar at the top of the screen, am I right? If that’s the case, there’s currently no option to change the popup direction. I’ve got a new feature pending that will allow to display the navbar at the top of the screen via position: top, both for mobile and desktop, which would solve your scenario.

@nemo-gim

And another option to use images instead of icons?

There is! Check out the image prop for each route. You can even take a look at this example for a quick snippet on how to use images as route icons

[joseluis9595 (Jose Álvarez)]

@PedroKTFC

That almost works but I get a big empty space at the top:

Is this happening only on mobile or on desktop? Or both?
If both devices have the same issue, try disabling the auto padding feature under the layout section.

type: custom:navbar-card
...
layout:
  auto_padding:
    enabled: false

If you only need to disable for one of them, you can do something like this:

type: custom:navbar-card
...
layout:
  auto_padding:
    desktop_px: 0     # to disable auto_padding only for desktop
    mobile_px: 0      # to disable auto_padding only for mobile

[joseluis9595 (Jose Álvarez)]

Adding support for position: top in mobile has been requested a few times. I’ll try adding it to the next release, and hopefully you won’t need to use custom styles for navbar-card to be displayed properly

[joseluis9595 (Jose Álvarez)]

@Mar1us

so i tought it should work with the hidden option

I’m guessing the Javascript code you pasted, is used inside the hidden prop of navbar-card, right? If that’s the case, you don’t need to return "on" or "off". The hidden prop expects a boolean value, so you can simply do:

return count <= 0;

[joseluis9595 (Jose Álvarez)]

@AntonH

Is there a way to pass a CSS variable as a badge color?

It should work with either raw color values, or CSS variables. Just make sure --token-rgb-green is actually defined in your setup. You can take a look at some of the pre-defined css variables of Home Assistant in their github repo.

[joseluis9595 (Jose Álvarez)]

@derekpurdy

Is there a way to dock the bar in desktop mode as well?

Not at the moment, but it’s already been requested. I’ll keep that discussion updated with new progress

[joseluis9595 (Jose Álvarez)]

@TripleQ

Any way I can force “docked” at higher resolutions?

Hi @TripleQ ! If I’ve understood correctly, yes, you can! You can play with the min_width option in the Desktop configuration.

When using a number of, let’s say, 1080, it means that all screens that are 1080px in width or more, will be displayed as desktop mode. All the devices with screen resolutions lower to that 1080px, will then be displayed in the mobile variant.

[joseluis9595 (Jose Álvarez)]

@marcel-k

show: |-
            [[[return Object.values(states.light).some(
                e => e.area_id === 'buro_marcel' && e.state === 'on'
            )]]]

The states object contains the state of all entities in your HA instance. That means, states.light is not going to work, unless you have one entity conveniently named light.

So, to fix this, you can take a look at this example, and change the filter function to adapt it to your use case:

show: |-
  // Store the light entities in a variable to avoid recomputing them on each render
  if (!this._lightEntities) {
    this._lightEntities = Object.keys(hass.states).filter(id => id.startsWith('light.'));
  }
  return this._lightEntities.filter(id => states[id].state === 'on' || hass.entities[id] == "buro_marcel").length > 0;

@marcel-k

I’m completely off track – it’s only meant for a counter, right? It basically needs a counter.

But I don’t need that for the subcategories (rooms)… I just want to see if the light is on or off in that room. Does anyone have an idea how I can represent that visually?

Maybe I’m not understanding something here, but you don’t actually need to add a counter. If you just configure the show option and leave the count one empty, the badge will be displayed as a small circle with no text inside. Just as you show in the original screenshot.

[AntonH]

I’ve just tested with the standard Home Assistant theme in your link and it doesn’t always work.
None of the variables in my custom theme work and only some of the standard variables work.

var(–primary-color) works:

var(–rgb-warning-color) does’t work:

[marcel-k]

Thank you so much for your reply.

I didn’t explain myself very well.

I simply want the yellow circle to be displayed only when any light is on in this room.

It would be visually appealing if the icon were color-coded, of course. But the circle alone would be perfectly sufficient.

A counter isn’t necessary in the submenu (popup) since it’s already present in the main menu.

I’ve inserted your code, but the circle is still permanently displayed.

[TripleQ]

Super! tested it and works perfectly.

Many thanks for the support and for all your effort.

[homie22]

Hey, that’s rude!
It sounds like you’re “summoning” him.
This awesome project it’s only possible because he pours his free time into it.
You’re not paying him, nor buying something.
So, don’t go around expecting some kind of right for support.
It’s ok to ask for help, just be patient.