Determine which view is currently active?

I’m working on my new dashboard and have created a sidebar which I’d like to add as part of the includes. I was hoping to style the menu buttons to set the background color to highlight the active view, I have the style part working manually but I’m not sure how to check the current view.
Is it possible to access the URL at all either view card-mod or some other means, so that I can setup the colours based on a condition that depends on the current URL.

I could of course have separate a side yaml that is included for each view with the appropriate styling, but that doesn’t seem very efficient! :smiley:

@swifty did you get this to work? I’m trying to do something very similar…

I did, but it was a bit of a hack as I couldn’t find any other way of making it work.

Basically add some identifier after the url for the tap action of your button… eg;

The home button tap action could be;

        tap_action:
          action: navigate
          navigation_path: 'energy#e'

The ‘#e’ is the useful part - this doesn’t alter the actual navigation, so HA will just navigate to the ‘energy’ view.

Then I used card mod to alter the styling of the menu button so that if the current url ends in ‘#e’ (in this example) it will set a dark background etc on the ‘energy’ button to indicate we are in that view already.
This is done using an if statement within the card mod (exactly where you place this will depend on the styling or card you use) but as an example it could be;

card_mod:
  style: |
    ha-card {
      {% if hash == 'e' %}
        # This styling is applied if the url ends with the hash 'e'
        background: rgb(var(--rgb-blue),0.8) !important;
      {% else %}
        # Otherwise it'll use this styling
        background: rgb(var(--rgb-blue),0.1) !important;
      {% endif %} 

Hope that helps.

1 Like

@swifty thanks for the response. I’m following the logic, but am having trouble figuring out where to insert the card_mod styling. I’m trying to apply the conditional formatting to a custom:button-card. Any suggestions?

Figured it out! Thanks again for the help!

 - type: custom:button-card
    name: "Floor Plan"
    layout: label-card
    tap_action:
      action: navigate
      navigation_path: '/lovelace/floor_plan#a'
    styles:
      card:
        - padding: 1%
        - height: 32px
        - background-color: >
            [[[
              var hash = window.location.hash;
              if (hash == '#a') return 'blue';
              else return 'red';
            ]]]
2 Likes