Navigation menu between dashboards

Hi! Im trying to create a navigation menu to navigate between different dashboards. I can see that this topic has been discussed in the forum before and that there is no native way to create this menu right now.

I have created a solution/hack that works for me, but I would like to check that the solution will not break suddenly.

I have created a supertile with my menu items.

I then add this tile to all of my dashboards. This means that I can update the menu from one place.

Now I would like to highlight the current dashboard the user is visiting. I can there see that the super tile gets a id (and a data-entity) that seems to be stable between different dashboards. The supertile on my main dashboards receives the id “tile-holder-QXciubcQ”, while the id changes to “tile-holder-NE4tsI7g” on my “Lys (Lights)” dashboard.

With some css I can then highlight the items in the super tile that corresponds to this current dashboard.

#tile-holder-QXciubcQ .tile .main-content .item:nth-child(n+1):nth-child(-n+2),
#tile-holder-NE4tsI7g .tile .main-content .item:nth-child(n+3):nth-child(-n+4),
#tile-holder-duLupLA6 .tile .main-content .item:nth-child(n+5):nth-child(-n+6) {
  color: #ffc107;

This works perfectly for me!

I know this is a hacky solution, but it works for me. Im just curious if the usage of these IDs to style elements is “safe”? Can the IDs used change suddenly? In your next build or something?

This works between reloads and has been working for about a week for me now.

1 Like

The IDs are unique to the tiles on your dashboard so the IDs themselves won’t change, but we may change the DOM structure in the future. For example, we’ve been considering getting rid of the wrapped ‘tile holder’ as it was originally in place for a different reason and isn’t needed anymore. As such, you might consider using the .tile[data-entity-idx="XXX"] selector instead of the #tile-holder-XXX one.

Another approach would be to use the “named styles” approach where you would create a few different named styles, then you could apply the relevant style to the navigation tile in each dashboard and write your Custom CSS accordingly. .

1 Like

Thank you! Will change to data-entity selectors instead. And nice to know about the named styles approach!

1 Like