How to create a button linking to another HA tab (or view)?

Share your Projects! Dashboards & Frontend
3

I use this in a picture elements card to navigate to another tab/view called alarm_map, i.e. the id of that view is alarm_map:

  - type: state-icon
    entity: sensor.ready_to_arm
    tap_action: navigate
    navigation_path: '/lovelace/alarm_map'
    style:
      left: 60%
      top: 5%
3 Likes
4

Id’s didn’t work anymore for me since 0.84.
There’s a new path option.

1 Like
5

Thanks, I found it works best with a picture card, e.g. like this:

  - type: horizontal-stack
    cards:
    - type: picture
      image: /local/pic-0.png
      navigation_path: '/lovelace/0'
    - type: picture
      image: /local/pic-1.png
      navigation_path: '/lovelace/1'
    - type: picture
      image: /local/pic-2.png
      navigation_path: '/lovelace/2'
    - type: picture
      image: /local/pic-3.png
      navigation_path: '/lovelace/3'

It would be nice though, to know which other lovelace cards work with navigation_path.

1 Like
6

Those who mention it in the documentation do.

Note that the configuration has changed, so your code won’t work on 0.84.

7

Thanks, I will have a look!

8

This is strange. After updating to 0.84.2, the picture button links don’t work anymore. Or, they worked briefly after a hassio restart this morning, but now when I connect from work they are not recognized as links anymore. Same on my mobile phone.

9

I’ am on 0.84.6
Noting that configuration has changed as you mentioned
Trying to get this to work, but nothing happens
Could you point me in the right direction

- title: Living room
    path: living_room
    cards:  
      - type: picture
        image: /local/graa.png
        tap_action: 
          action: navigation
          navigation_path: /lovelace/main/
10

Should be action: navigate

11

Thank you…!
I have stared at this for hours…thanks again

12

For the ones arriving, looking for an answer (quickest anno 2021)

Use button integration;

type: button
tap_action:
  action: navigate
  navigation_path: /lovelace/meters
icon: 'mdi:cog-transfer'
name: Presets aanpassen

2021-03-14 20_27_09-Window
2021-03-14 20_27_09-Window1040×572 31.8 KB

16 Likes
13

What does the path look like on another dashboard?

14

I’m using the a windows 8 approach so tile references
using area instead of picture type
please not that you need to make area for every tab

type: grid
cards:
  - type: area
    area: garden
    navigation_path: /lovelace-tile/Garden
  - type: area
    navigation_path: /lovelace-tile/Office
    area: office
  - type: area
    navigation_path: /lovelace-tile/Bedroom
    area: bedroom
  - type: area
    navigation_path: /lovelace-tile/Bedroom2
    area: bedroom2
  - type: area
    navigation_path: /lovelace-tile/Kitchen
    area: kitchen
  - type: area
    navigation_path: /lovelace-tile/Livingroom
    area: living_room
  - type: area
    navigation_path: /lovelace-tile/Diningroom
    area: diningroom
  - type: area
    area: meterkast
    navigation_path: /lovelace-tile/Meterkast
  - type: area
    area: attic
    navigation_path: Attic

and every tab has are return tile

type: area
navigation_path: /lovelace-tile/tiles
area: overview
15

is there any way that the subview don’t open in a new window each time I click on it ?
On the Android App when clicking on the area (or button in my case) it tries to open a Chrome instance instead of staying in the app and simply change the tab.

1 Like
16

The solution is to use “navigate” and not “url” in the command.

17

Just click on the dashboard you want and look at the last part of the URL. It must be something like:

/lovelace-title1/path1
/lovelace-title1/path2
…
/lovelace-title2/path1
/lovelace-title2/path2

2 Likes
18

thanks, I had already found it

19

Thanks for that one

20

Can you share how u did it? I can’t make it work.


  - type: state-icon
    entity: device_tracker.tesla_model_3
    state_color: false
    tap_action: navigate
    navigation_path: /dashboard-tesla/0
    style:
      top: 7%
      right: '-2%'
      '--iron-icon-height': 80px
      '--iron-icon-width': 80px
      '--paper-item-icon-color': white
21

Read the docs:

tap_action:
  action: navigate
  navigation_path: /dashboard-tesla/0
2 Likes
22

Thanks a lot.