🧭 Navbar card: easily navigate through dashboards

[loic69]

Hi all
Somebody can tell me how to get number of lights turn on in JSTemplate to display in badge ?
I have the following YAML which working but don’t understand to get it OK in JSTemplate.

{{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count}}

EDIT : and so on get number of entity ON in a groups of light

Thanks

[Goobis]

Maybe I’m dumb but is there a way to make the badges conditional? I want a badge with how many lights are on but it still returns a blank badge even with the sensor outputting null.

[Showman03]

Hi everyone!

Is this dashboard done with navbar card? If so, how does it use “docked” in desktop mode? Or is it some CSS magic i can’t figure out?

Thank you!

[joseluis9595 (Jose Álvarez)]

@AntonH

I’m sure it’s possible with the templates, but I’m not a great coder. Most other cards use YAML/jinja templating, but this one uses JavaScript.

Actually, most custom cards in Home Assistant use JS templates, instead of yaml. When I first started navbar-card, I looked into how other custom cards handled templating and found that JS templates were the most standardized approach.

That being said, I completely agree it can be confusing, HA itself uses yaml templates, while most custom cards use Javascript. From a implementation standpoint though, JS templates are generally simpler to work with.

I’m still not 100% sure it was the perfect decision, and I might explore migrating to YAML templates in the future. The obvious downside will be, that it would break existing configurations for all current users, which is not desirable.

[joseluis9595 (Jose Álvarez)]

@homie22

Hi,
is this not a valid configuration/pointer?

.popup-item .label.active {
  color: red !important;
}

How to correctly change just the active label of a popup-item?

Right not the .label component does not have the .active class modifier (need to fix it for the next release). But you can do it targetting the .popup-item component:

.popup-item.active .label {
  color: red !important;
}

[joseluis9595 (Jose Álvarez)]

You can use HA css variables for common colors, like --card-background-color for the card’s background, or --primary-text-color for text color. You can find lots of already pre-defined variables covering most use cases in the frontend repo of Home Assistant.

You could also manually define the styles with css media queries, targetting the dark mode:

.navbar-card,
.navbar-card.mobile.floating,
.navbar-card.desktop,
.media-player {
  border-radius: 34px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
}

@media (prefers-color-scheme: dark) {
  .navbar-card,
  .navbar-card.mobile.floating,
  .navbar-card.desktop,
  .media-player {
    background-color: red !important;
  }
}

This will display the background color as pure white for light mode, and pure red for dark mode

[joseluis9595 (Jose Álvarez)]

Maybe something like this? (modifying both the width, height and icon size to your liking, of course!)

.popup-item .button {
    width: 80px;
    height: 80px;
    background: transparent;
    box-shadow: none;
}

.popup-item .button .icon {
  --mdc-icon-size: 50px;
}

[joseluis9595 (Jose Álvarez)]

@nelsonamen

I found it but it, this should be in the readme

Thanks for the suggestion! I’m working on improving the examples on the docs, so I will sure add one example for this. Thank you!

[joseluis9595 (Jose Álvarez)]

@iona

I can’t seem to get the bottom padding working with/without ‘auto’ switched off. I entered a figure above 90, but it makes no difference.

Did you eventually fix this? If not, feel free to open a issue on github and I’ll investigate further

@iona

Also, just wondering if the following can be added via the UI please?

• Labels for Selected Route only
• Padding between each Route
• Icon colour for Selected Route only.

Yes! All of them can be done using the styles prop:

type: custom:navbar-card
...
desktop:
  show_labels: true
mobile:
  show_labels: true
styles: |
   /* Display label only for active route */
  .label:not(.active) {
    display: none;
  }
  
  /* Increase the gap between routes */
  .navbar-card {
    gap: 50px !important;
  }

  /* Icon color only for active route */
  .route.active .icon {
    --icon-primary-color: red !important;
  }

Though, for the active icon color, you might be looking for the selected_color prop of each route. You can find more info on the docs, and see one example configuration here

[joseluis9595 (Jose Álvarez)]

@Goobis

Having an issue where it doesn’t actually stick to the bottom. If I scroll the card bobs up at the end of the dashboard. Is this intended behavior?

This might be related to a bug reported on the Home Assistant frontend repo: Weird scrolling issues on mobile - iOS app and Safari · Issue #27107 · home-assistant/frontend · GitHub

Some users have reported that, after updating to ios 26.1, the issue is gone.

[joseluis9595 (Jose Álvarez)]

You can either change the --navbar-primary-color via css to change the active color of all routes, or use the new selected_color prop for each route

Example using --navbar-primary-color: Examples | Navbar Card
Example using selected_color for each route: Examples | Navbar Card

[joseluis9595 (Jose Álvarez)]

Hi @PedroKTFC , navbar-card is not designed to be used inside other layouts (like vertical layout card) but I’ll try to give you some solutions:

1. Sizing

You can try disabling the absolute positioning of the card, but keep in mind, this might break things (specially if you are using the media_player widget of navbar-card)

type: custom:navbar-card
...
styles: |
  .navbar {
    position: relative !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
    transform: none !important;
  }

2. Kiosk mode

Apart from this card not being designed to work inside other layouts, I’ve also neglected adapting it to the position: top variant So bugs like this are likely to happen. I’ll try fixing it for future releases but, two things:

• This issue will be fixed when using the suggestion from the first section. When changing the position to relative, there will be no overlap with the header section
• You can completely hide the native HA header, and use navbar-card custom actions to toggle the side menu, open edit mode, launch assist… etc. Just take a look at the supported actions and that might make you change your mind over using navbar-card as it is, instead of relying on the relative positioning

[joseluis9595 (Jose Álvarez)]

@loic69

Hi all
Somebody can tell me how to get number of lights turn on in JSTemplate to display in badge ?
I have the following YAML which working but don’t understand to get it OK in JSTemplate.

{{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count}}

EDIT : and so on get number of entity ON in a groups of light

Thanks

@Goobis

Maybe I’m dumb but is there a way to make the badges conditional? I want a badge with how many lights are on but it still returns a blank badge even with the sensor outputting null.

There’s a new Examples section in the docs, and I’ve added one just for this use case. Take a look at said example here

[joseluis9595 (Jose Álvarez)]

Hi @Showman03 ! That looks like the native Google Home app, or an adaptation of the Home Assistant frontend using something like this

[stefan1982 (Stefan)]

Couldn’t you just use:

.popup-item .label:active {
  color: red !important;
}

That’s a valid CSS pseudo class…

[fvhemert (Francois van Hemert)]

Hi, I started to experiment with the popup functionality and noticed alignement of the popup items depends on the position in the main menu bar,

As you can see in the illustration below, the left popup menu is left aligned, where the other two are right aligned.

Q: Is it possible to always have the popup items left aligned regardless the position in the main menu, so the icons are all in one line?

[nemo-gim (nemo)]

Hola José Luis!!

Is there an option to make the pop-up appear at the bottom instead of at the top?
And another option to use images instead of icons?
Thanks for your help!

[PedroKTFC]

Thanks for your suggestions but…

1. Sizing

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

2. Kiosk mode

I need to look at this more and I’ll get back if I have any problems.

Thanks again.

[HUK]

Just getting started with this card… Thank you @joseluis9595 for your work on this card.

I’m trying to position the nav bar accurately at the top, on mobile.

I couldn’t find an easier way, so this seems to work for me, but I would welcome better ideas -

              .navbar.mobile {
                position: absolute !important;
                top: -10px !important;
                left: -10px !important;
                width: 120%;
                }

How can I get the pop ups to drop down? (At the moment they pop up off the screen)

Thank you

[Mar1us]

Hey,
i want to display a route only if a sensor is ‘on’ from a list of sensors, so i tought it should work with the hidden option. This i my js code but it doesn´t work. Can someone help?

const prefix = "binary_sensor.nina_warning_xxxx_hessen_";
    const count = Object.values(states).filter(
      s => s.entity_id.startsWith(prefix) && s.state === "on"
    ).length;
    return count > 0 ? "on" : "off";