🧭 Navbar card: easily navigate through dashboards

[Fugazzy (Lutz Fricke)]

I use it like this with an input-boolean helper:

kiosk_mode:
  entity_settings:
    - entity:
        input_boolean.kioskmode: 'on'
      hide_header: true

Now I use a double-tab-action to switch between Kkosk and nomal mode:

        double_tap_action:
          action: perform-action
          perform_action: homeassistant.toggle
          target:
            entity_id: input_boolean.kioskmode

[wailingserpent (Mamba)]

Ooh. Thank you for this. I had been adding ?disable_km=&edit=1 as my double tap action for editing the views.

[sdholden28]

Great ideas @wailingserpent @Fugazzy. I’ve been using a fully kiosk service call to reload the browser to the proper URLs. This works fine, but it requires fkb obviously, and is a bit clunky with a full page reload everytime. Thanks!

[Great_Chart (Neil Tonks)]

Jose - Just found this card and slowly integrating it. So far it’s been very effective and I’ve found the docs / forum post answering most questions.

Apologies but JST is a bit new to me and whilst you have answered an earlier post for triggering a badge based on 2 differing entity states I can’t seem to fathom out the correct syntax.

If I use these individually I get a correct badge :-
badge:
show: >
[[[ return states[‘input_select.housemode’].state === ‘Away’ ]]]
or
badge:
show: >
[[[ return states['‘input_boolean.mode’].state === ‘on’ ]]]

But I’m not able to correctly put these together to get a badge if 1 OR the other is valid.
Any chance you can “link” them correctly so I can understand what I’ve missed.
Many thanks

UPDATE - found my error. It should be as follows (i’d repeated the return in the 2nd entity portion).

[[[ return states['example.thing'].state === 'on' || states['example.other_thing'].state === 'off' ]]]

[cliffkujala]

Has anyone found a way to trigger a logout from a Navbar card button?

I have tried many different variations of calling the url discussed in this post:

@khara

http://[your home assistant ip:port]/auth/authorize?response_type=code&client_id=[your home assistant ip:port]/&redirect_uri=[your home assistant ip:port]

But id doesn’t seem to work. It just doesn’t go anywhere. If I load that directly into the url bar of the browser, it does bring me to the login screen and the user seems to be logged out (although I don’t think they really are because you can just click the back button and you are still authenticated).

I am building a “kiosk” so I would really like a way to logout the limited Kiosk user, and jump into my admin account if I need to.

[AndreaDR (Andrea)]

@joseluis9595 thank u so much … you solved!

[mapall1 (Michael)]

I’m wondering if I am missing something. I want to display the background for the popup labels for readability. When I add this line:
show_popup_label_backgrounds: true
the background shows up but the justification changes so the icons are now on the left side rather than the right. I’d like the icons to be on the right.

Any guidance is appreciated.
Thanks

[TheSpirit (Andreas)]

why is the navbar blocking my bottom most card?

[TheSpirit (Andreas)]

works now with final 1.0.0.
Thanks

[mase]

congrats @joseluis9595 for the v1.0 release!

for anyone that is using only 1 route and wants to have it on the beginning/left of the navbar (on mobile):

.route {
  flex-direction: row;
  justify-content: start;
}

[DidierM (Didier Miller)]

This is such a nice card!
Can you maybe help me out with this (and perhaps put this in an example on github)?
I added a button for the path to updates and want to add the “count” to the badge. I can do it in YAML:

{{ states.update.state === 'on') | list | count }}

I tried a lot of code and ended up with something like this, but it doesn;'t work:

 - icon: mdi:update
        url: /config/updates
        badge:
          show: true
          count: "[[[ return states['states.update'].state === 'on' ]]]"

[webhoffi]

i have the same problem, but it seems that happens only with helper template sensors. With entity sensors i have no prblems.

[vermontia]

I am wanting to save my navbar as a template to easily reuse on mulitple dashboard views. Is it that within the card configuration I select “show code editor” and then add the code right at the top in the first line? Thanks!

navbar-templates:
your_template_name:

[tontze (Tomi)]

I managed to add assist button, but would like its icon color to be different, how do i do this ?

This does not work :

  - icon: mdi:account-voice
    label: Assistant
    tap_action:
      action: assist
      pipeline_id: 01k5bz8krext0yyfjj47641h53
      start_listening: true
    styles: |
      .icon {
        color: blue;
      }

[crypticSlave (Pablo Ybarra)]

I’m new to Navbar, I can’t for the life of me figure out how to add templates to my configuration. I’m not sure if I’m mis-reading the instructions, or if there’s actually something wrong with my home assistant instance.

I’m currently trying to add it to “configuration.yaml”. When I do so, I get a warning in the Developer Tools YAML section saying that there is no integration named “navbar-templates.”

Am I supposed to be adding the template section to my “configuration.yaml” file? And is there a specific area of the file I’m supposed to be adding it to? If not there, where am I supposed to be putting this?

Template in question below:

navbar-templates:
  default:
    routes:
      - url: /lovelace/home
        icon: mdi:home
        label: Home
      - url: /config/automation/dashboard
        icon: mdi:creation
        label: Automations
      - url: /config/dashboard
        icon: mdi:cog
        label: Settings
      - icon: mdi:network-outline
        label: Network
        url: /lovelace/network-management
        icon_selected: ""
      - icon: mdi:dots-horizontal
        label: More
        tap_action:
          action: open-popup
        popup:
          - icon: mdi:power
            tap_action:
              action: call-service
              service: homeassistant.restart
              service_data: {}
              confirmation:
                text: Are you sure you want to restart Home Assistant?
            label: Power
          - icon: mdi:hammer
            url: /developer-tools/yaml
            label: Developer
          - icon: mdi:account
            url: /profile/general
            label: Profile
    layout:
      auto_padding:
        enabled: true
        desktop_px: null
        mobile_px: 62
    mobile:
      mode: floating
    haptic:
      url: true
      tap_action: true
      hold_action: true
      double_tap_action: true

[artpcpl]

[cyrusir]

Sorry i am sure i am missing something very obvious, this looks great but now i have added it i cant see where i can go back in and edit it via the gui?

[michapau]

Thank you very much @joseluis9595 for this card!! Really enjoying it!!!

A question for you as well - is it possible to make a hover effect like this, when the background covering both icon and label, if you understand what I’m trying to say …?

[3b0k]

I have used the navbar card and am very satisfied with it. Now I would like to hide the standard toolbar (the blue bar at the top). However, I would still like to be able to use the options in it via the navbar (if the logged-in person has admin rights).

Has anyone done this before? How did you manage it?

[jahopki (Jim Hopkins)]

For the life of me, I cannot figure out how to create & save a navbar-templates template while using the UI for managing and editing dashboards – even if I use the Raw Configuration Editor option through the Dashboard Management UI. It would seem that the majority of folks have figured this out; can someone please help me? This example yaml doesn’t make sense because it’s not a valid dashboard. HA complains about the missing view top-level attribute. (Plus, the example here doesn’t include a name for the navbar-template template, but I can handle that.) What is shown here appears to be "create a new Dashboard, use the Raw Configuration Editor to replace the entire contents of the dashboard, and save the template. That would be easy, albeit confusing, except that HA won’t save this example as it exists. Attempting to save this yaml results in HA reporting an error message of: Your configuration is not valid: a: At path: views -- Expected an array value, but received: undefined