Hi…about badge i tried tò use the following Line as i ready in the documetation
badge:
template: states[‘climate.thermostat’].state === ‘heat’
I would like that badge depends by the state of two entities, so “or” “or”, the second entity Is climate.heater state “auto”. I tried many different way buy uncessuful.
Can someone help me?
Is possible thate the badge ‘blink 2s ease infinite’ too?
Thanks in advance
Somehow I missed that in the docs. I should’ve done better. Works like a charm. Thanks.
@AndreaDR You might be using the old syntax for badge configuration, take a look at the new one.
For your current use case, it could look something like:
type: custom:navbar-card
...
routes:
- ...
badge:
show: >
[[[ return states[‘climate.thermostat’].state === ‘heat’ || another_condition_here ]]]
And regarding the blinking animation, try this:
type: custom:navbar-card
...
styles: |
@keyframes blink {
50% {
opacity: 0;
}
}
.badge {
animation: blink 2s ease infinite;
}
Docs might need a rewrite anyway, so no worries! 
is it possible the make it vertical view?
The new update with popup_action is great.
I use it to have open a popup on hold with options to switch scenes per room.
Thanks @joseluis9595 
Here is my config and image:
navbar-templates:
routes:
- url: /lovelace/living
icon: mdi:sofa-outline
icon_selected: mdi:sofa
label: "Living\_Room"
hold_action:
action: open-popup
popup:
- tap_action:
action: call-service
service: script.activate_scene
service_data:
area_id: living_room
scene: Work
label: Work
icon: mdi:briefcase
- tap_action:
action: call-service
service: script.activate_scene
service_data:
area_id: living_room
scene: Chill
label: Chill
icon: mdi:hot-tub
- tap_action:
action: call-service
service: script.activate_scene
service_data:
area_id: living_room
scene: TV
label: TV
icon: mdi:television
- tap_action:
action: call-service
service: script.activate_scene
service_data:
area_id: living_room
scene: TV Night
label: TV Night
icon: mdi:television-ambient-light
- tap_action:
action: call-service
service: script.activate_scene
service_data:
area_id: living_room
scene: Night
label: Night
icon: mdi:lightbulb-night
- tap_action:
action: call-service
service: script.activate_scene
service_data:
area_id: living_room
scene: 'Off'
label: 'Off'
icon: mdi:lightbulb-group-off
Hi @ald112 , is this what you are aiming for?
If so, you simply need to configure the position value in desktop mode.
Quick example:
type: custom:navbar-card
desktop:
position: left
routes:
...
Looks good! Might steal the idea for my own dashboard
(thanks to you for requesting the popup action on github!)
@joseluis9595 thank u so much might
@joseluis9595 there is way in order to get “back” in the “home route” automatically after “x” seconds?
3 suggestions!
Hi @laurens362 , thanks for taking the time to help improve navbar-card 
Good news is, 1 and 3 are already possible! Quick example:
type: custom:navbar-card
desktop:
position: bottom
routes:
...
- icon: mdi:dots-horizontal
label: More
# Use the prop "hidden" to control the visibility of this route
# using JS templates
hidden: |
[[[
return user.name !== "jose";
]]]
tap_action:
action: open-popup
popup:
...
- icon: mdi:cog
url: /config/dashboard
# "badge" configuration is also available in popup items!
badge:
show: |
[[[
return states["binary_sensor.docker_hub_update_available"].state === "on";
]]]
[quote=“joseluis9595, post:73, topic:832917”]
hi,
this doesnt seem to work for me: s
And i also cant make one hidden with anything else then person though…
type: custom:navbar-card
routes:
- url: /dashboard-2-0/0
icon: mdi:home
label: Home
- url: "#f1"
icon: mdi:racing-helmet
label: F1
hold_action:
action: navigate
navigation_path: "#f1"
badge:
show: |
[[[
return states["light.woonkamer"].state === "on";
]]]
- url: /config/automation/dashboard
icon: mdi:creation
label: Automations
- url: "#plex-list"
icon: mdi:plex
label: Plex
hidden: |
[[[ return user.name != "Adna"; ]]]
- url: "#plex-list"
icon: mdi:plex
label: Plex
tap_action:
action: open-popup
popup:
- icon: mdi:movie-plus
url: "#plex-list"
label: plex added
- icon: mdi:plex
url: "#plex"
label: plex watching
hidden: |
[[[ return user.name != "Laurens"; ]]]
badge:
show: |
[[[ return states['sensor.tautulli_stream_count'].state > 0; ]]]
color: green
- icon: mdi:dots-horizontal
label: More
tap_action:
action: open-popup
badge:
show: |
[[[ return states['group.all_update_entities'].state === 'on'; ]]]
color: green
popup:
- icon: mdi:silverware-fork-knife
url: "#eetlijst"
label: Eetlijst
- icon: mdi:wifi
url: "#wifi"
label: Wifi
badge:
show: |
[[[
return states["light.woonkamer"].state === "on";
]]]
- icon: mdi:docker
url: "#docker"
label: Docker
hidden: |
[[[ return user.name != "Laurens"; ]]]
- icon: mdi:update
url: "#updates"
label: Updates
hidden: |
[[[ return user.name != "Laurens"; ]]]
styles: |
.navbar {
background: #000000;
--navbar-primary-color: lightblue;
}
.icon {
--mdc-icon-size: 30px;
}
Still doesnt work after the new update 
Can you open the JS console, and check which version of navbar card you have installed? Seems like the latest release had some kind of problem with the compiled file, and is still downloading the 0.6.0 version.
Will force a new release, to see if that cleans things up.
You should be able to access the states variable as well as the person one, in any JS template used across navbar-card.
Should be fixed with the latest release
Still not working! Im on 0.7.0 according to js
I am using a custom:button-card. How do I set the style to be 50% transparent on a button card custom_fields?
I only have one icon, how would I make it centered and show up bigger?
Is it possible to add these to the template?
desktop:
position: left
min_width: 768
show_labels: true
mobile:
show_labels: false
Sorry @laurens362 , haven’t checked HA community for a while
Was the problem solved? If not, feel free to open an issue on github and I’ll take a proper look at it
Also, quick tip, for debugging templates in navbar-card, you can use console.log to print debug data to the JS console if needed.