Navigation Pane in dashboard

Hi,
I am new to HA but making progress getting up the speed. I have a mock up for what I want the dashboard to look like, and need help with one element.


I want this view to show up globally on every dashboard, and every tab within the dashboard. think of it as the left navigation pane I need. I will have a dashboard for each of the buttons, like a dashboard for the house, which will have all the details for the house. So each of the buttons will navigate to a dashboard, not a tab. Is this possible??
In the future, I intent on using Kiosk and browser-mod (based on my research) to have this displayed nicely as the control system for my HA when not being viewed from my PC (e.g. tablet in the kitchen).
Anyone know the best way to get this done? Mainly the navigation pane I am showing? the rest I will work on figuring out.

One more comment, this view is all within a Grid card. So all self-contained

Welcome, Haze!

Navigation is quite easy, just click in the browser bar (is it called so?) and pick the name of your lovelace dashboard:

http://123.456.78:8123/my-dashboard/blabla

And now chose a navigation button, e. g.

type: button
tap_action:
  action: navigate
  navigation_path: /my-dashboard/

1 Like

Thanks for the response. I am able to get the navigation done now, but how do I make the view in the original post be on every page?
Think about each of my dashboard should have that exact left column I am showing above, and the rest of the dashboard content is displayed based on which button I press.
Like this:


If I click on pool, then the dashboard for the pool shows up on the right, but the main navigation pane remains.
The hack is to replicate it on each dashboard, but that would be a mess to update any change across many dashboards.

Then I have misunderstood you - and am still on the fence…

So you always want to display the main nav bar on selected dashboard, right?

However, if you want global elements then lovelace mode could do it better because you are able to apply whole .yaml files with a single line by using !include … .

I have been playing with these recommendations from @pedolsky

I believe the include would work for what I want to do. Here is the thought I have about implementing. Let me know if my thought process is way off. I have watched enough YouTube videos about Lovelace and the flexibility is there, I just need to decide on an approach.

  1. I will create a dashboard, which would be hidden from the navigation bar as it is only for navigation.
  2. I will create a dashboard for each of the views I want. One for House, one for Pool, etc…for the location navigation, and also create a dashboard for each of the entities. Lights, presence, etc. All these dashboard will match one of the buttons I have in the navigation dashboard.
  3. All the above dashboards will be hidden
  4. Create the main dashboard, which will be a grid template, 2 grids really, side by side.
  5. Include the navigation dashboard in the grid on the left
  6. Add “logic” on the grid on the right to load the correct include in that grid depending on which button is pressed from the left. with a default loaded to start. Does that work? Can I conditionally include dashboards? Seems like the include function for yaml is basically a code structure, so where I include is as if the code was written there. I am a total newbie with this, so apologize if the question or statement is ridiculous.

Does that make sense? Anything I should watch out for? Any videos, tutorials, etc which exist that I can read and figure this whole thing out?

Thanks for the help

Correct. You can play with something like this (displays my room details):


    tap_action:
      action: navigate
      navigation_path: |
        [[[
          if (entity.entity_id == 'group.diele') return '/homezone-yaml/raum-diele';
          if (entity.entity_id == 'group.schlafzimmer') return '/homezone-yaml/raum-schlafzimmer';
          if (entity.entity_id == 'group.kueche') return '/homezone-yaml/raum-kueche';
          if (entity.entity_id == 'group.wohnzimmer') return '/homezone-yaml/raum-wohnzimmer';
          if (entity.entity_id == 'sensor.hochzeitstag') return '/homezone-yaml/raum-wohnzimmer';
        ]]]

Got it. Makes total sense.
Now to load the navigation on the left side of each of the windows, I can include that file in each of the room yaml dashboard. In your example, I can add the navigation.yaml in each of the raum-diele, raum-schlafzimmer, etc. so it all loads, both navigation and content.
I will play around with it to see if i need to create a grid, etc…but should be a few trial and error. I will do that and see where I get to. I am on a trip for a few days, but will get back to it and try it out. Thanks for the guidance.
Danke!

Probably not perfect, but i’m hoping that I will stumble on a easier solution at some point.

Someone posted a great grid tool these days: https://grid.layoutit.com/ Happy coding and tschö!

It is hard not to give up!
I have not been able to get this to work the way I want it.

I have a dashboard for the navigation, with the code below. That’s the one I want to have loaded on the left of all other dashboards. So I can make changes to the navigation in one spot, and have included in all others.

This is my code for the navigation pane

views:
  - title: Home
    theme: Caule Black Orange
    type: custom:masonry-layout
    badges: []
    cards:
      - type: grid
        cards:
          - type: custom:simple-clock-card
            use_military: true
            hide_seconds: false
            font_size: 8rem
            padding_size: 40px
          - type: custom:weather-card
            entity: weather.home_austin
            number_of_forecasts: '6'
            details: true
            forecast: true
            hourly_forecast: false
          - type: markdown
            content: >-
              <li>
                    {% if now().hour  < 5 %} Good Night {{'\U0001F634'}}
                    {% elif now().hour < 12 %} Good Morning{{'\u2615\uFE0F'}}
                    {% elif now().hour < 18 %} Good Day{{'\U0001F44B\U0001F3FB'}}
                    {% else %} Good Evening{{'\U0001F44B\U0001F3FB'}}{% endif %} {{user}}
                </li>
              The **Markdown** card allows you to write any text. You can style
              it **bold**, *italicized*, ~strikethrough~ etc. You can do images,
              links, and more.

              For more information see the [Markdown
              Cheatsheet](https://commonmark.org/help).

              I will be putting a summary here which is noteworthy, like any
              lights on when no presence detected, etc...
          - type: grid
            cards:
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: /home-controls/0
                icon: mdi:home-outline
                hold_action:
                  action: none
                name: HOUSE
              - type: button
                tap_action:
                  action: toggle
                icon: mdi:car-multiple
                name: GALLERY
              - type: button
                tap_action:
                  action: toggle
                name: GUEST-HOUSE
                icon: mdi:home-account
              - type: button
                tap_action:
                  action: toggle
                name: POOL
                icon: mdi:pool
              - type: button
                tap_action:
                  action: toggle
                name: GARAGE
                icon: mdi:garage
              - type: button
                tap_action:
                  action: toggle
                icon: mdi:train-car
                name: CAR PORT
              - type: button
                tap_action:
                  action: toggle
                name: FRONTYARD
                icon: mdi:leaf
              - type: button
                tap_action:
                  action: toggle
                name: BACKYARD
                icon: mdi:leaf
            square: true
            columns: 4
          - type: markdown
            content: >-
              The **Markdown** card allows you to write any text. You can style
              it **bold**, *italicized*, ~strikethrough~ etc. You can do images,
              links, and more.


              For more information see the [Markdown
              Cheatsheet](https://commonmark.org/help).
          - type: grid
            cards:
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: ''
                icon: mdi:lightbulb
                show_state: true
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: ''
                icon: mdi:motion-sensor
                show_state: true
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: ''
                icon: mdi:dip-switch
                show_state: true
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: ''
                show_name: false
                show_state: true
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: ''
                icon: mdi:view-carousel
              - type: button
                tap_action:
                  action: navigate
                  navigation_path: ''
                icon: mdi:table-settings
          - type: custom:fullscreen-card
        columns: 1
        square: false

I tested the navigation and I am now able to click on a button in the navigation dashboard, and it will take me to another dashboard. So far so good.
Here is another dashboard, blank.

views:
  - title: Home
    icon: mdi:home-outline
    theme: Caule Black Orange
    layout:
      max_cols: 2
    visible:
      - user: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
      - user: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
    type: custom:grid-layout
    badges: []
    cards: []
title: Home Controls

My first question is how do I now include the navigation dashboard in this one. That’s my fist step, so I know I can load a dashboard into another one. The include is not working, unless I am putting it in the wrong spot in the above code, or with the wrong indentation.
Any pointers on this one?

I have been looking at the custom layout-card and from what I have read, it may work. I have read and read the threads on the community and the GitHub details, but I am not sure where to start. Nothing I tried worked for me so far.
@thomasloven has done a great job including the CSS, but I am not able to integrate into a new blank dashboard. I am not well versed in all of this, so it has been a steep learning experience. I can do the UI stuff, but when it comes to the pure coding, I can manage if I know where to go.
The github example on the card page seems to be what I want. The CSS looks like it is defining areas (main, side, footer, etc) where we can place cards. It is exactly what I am looking for. Just don’t know how to do it. I like the media query too so I can make changes depending on the display, so I can make it responsive. But again, can’t get it to work.

I am now at the point of just wanting to get someone’s template working which I can modify. A 2-pane responsive dashboard, with the left pane being an include of another dashboard. I don’t need any fancy CSS other than the grid design. I will play with colors when I have a good handle on the default one first.
I use the app on my phone, and will have a few tablets around the house. Don’t need to make it pretty for every hardware out there. And for the tablets, will most likely use kiosk. I have been reading a bit about that. To hide all side and top navigation and just have a full screen view of the dashboard only.

This may be complex for a newbie, but I have gotten here so far. All my hardware is running, I have the automation, entities, etc. I am just stuck at the end to make this look like a nice dashboard with an easy navigation. I am really stuck.

Is there any reason for a dashboard in a dashboard? Just put all navigation cards in one big vertical-stack.
Second, have a look at Sidebar Card

I need the navigation stack (grid with a bunch of cards) to be loaded on every dashboard I have.
How can I get it to duplicate on each dashboard on the left of each.

I will take a look at sidebar Card. Can we add any type of cards within the sidebar card or are they preloaded and you pick. I will read up on it and see if it will work for me.

Thanks for the tip

In yaml-mode you are able to use !include

Any progress on this? I really like the idea and I think that this would be a good solution for me as well… :slight_smile:

I used the sidebar card. Very easy and did exactly what I needed with minor differences than my original concept. Main difference is I can’t have a card on the side, mainly a menu for navigation, with can add cards at the bottom. Here is what it looks like for me now.