So I’m setting up a navigation bar that will appear at the top of each of my views…
I’m attempting to make this entire thing a template which means it will be identical on each of my views. The only thing I wish to change is the highlight button to refect the view that is currently displayed.
Is there a way to use some conditional logic that will get the currently displayed view and change that particular icon to a highlighted color?
Thanks
Is that custom:button-card?
This should help build your logic:
Yes, multiple, nested
Test this one:
type: custom:button-card
name: |
[[[
let a = window.location.href;
let path = a.substring(a.lastIndexOf('/') + 1);
return path;
]]]
Excellent solution!
Idid, however, have to check for a ‘?’ at the end of the name because on occasion there will be a ‘?edit…’ or ‘?external…’ tacked on.
name: |
[[[
let str_final = 'X';
let str_1 = window.location.href;
let str_2 = str_1.substring(str_1.lastIndexOf('/') + 1);
let int_end = str_2.lastIndexOf('?');
if (int_end == -1) {
str_final = str_2;
} else {
str_final = str_2.substring(0, int_end);
};
return str_final;
]]]
Thanks for the guidance. I would never have figured this out without your help.
Hello, I’m trying to solve this problem too.
This solution is returning correct name displayed card, but i have no clue what to do next.
I have custom button card template of my menu card.
I Guess there have to be two value templates for each menu state active / inactive but dont know how to transform actually displayed card name into custom button card template value ?
Hello!
I’ve just straggled with simmilar issue for last few evenings.
Please find below solution, which work for me 
- type: "custom:button-card"
template: card_navigate
variables:
ulm_card_navigate_path: home
ulm_card_navigate_title: Home
ulm_card_navigate_icon: mdi:home
ulm_card_navigate_color: var(--color-black)
styles:
card:
- background: |
[[[
let path = window.location.href.split('/').pop();
if (path == 'home') return 'lightgrey';
]]]
How is this updating? I have a similar type of navigation
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
styles:
card:
- background: |
[[[
var hash = window.location.hash;
if (hash == '#main-floor') return 'rgba(255,255,255,0.1)';
else return 'var(--ha-card-background,var(--card-background-color,#fff))';
]]]
name: Main Floor
tap_action:
action: navigate
navigation_path: "#main-floor"
- type: custom:button-card
styles:
card:
- background: |
[[[
var hash = window.location.hash;
if (hash == '#upstairs') return 'rgba(255,255,255,0.1)';
else return 'var(--ha-card-background,var(--card-background-color,#fff))';
]]]
name: Upstairs
tap_action:
action: navigate
navigation_path: "#upstairs"
- type: custom:button-card
styles:
card:
- background: |
[[[
var hash = window.location.hash;
if (hash == '#energy') return 'rgba(255,255,255,0.1)';
else return 'var(--ha-card-background,var(--card-background-color,#fff))';
]]]
name: Energy
tap_action:
action: navigate
navigation_path: "#energy"
grid_options:
columns: 36
rows: auto
layout:
grid-template-columns: 33% 33% 33%
width: 100%
max_width: 100%
max_cols: 2
margin: 0
However, it never updates. If I want the styles to update I have to manually refresh the page.
Try adding this to your code…
triggers_update: all