Navigation bar

[Ayrton31]

Hello,

What do you think about the idea to develop a navigation bar card.
I removed the standard Home assistant bar and want to replace by mulitple icon to navigate on my Dashboard

I created this navigation bar with a grid card (same with a horizontal-stack card) but it's not ergonomic to have space between each icon.

[piitaya]

Hi 🙂 It's not plan to replace the standard navigation bar. The focus in on card.

[Ayrton31]

Yes of course but don't you think it could be a good idea to develop a card to make navigation more fluid and smooth ?
Obviously, this isn't the goal of Mushroom project to copye Minimalist UI project but my wish is to have something similar to this

So in only one card and we'll be able to create links on each button.

[piitaya]

You can already do similar thing using horizontal stack card.

[Ayrton31]

Yes like I've done and describe in my first screenshot but they aren't in a same card.

[alessandroias]

I did something like this for my waste collection:

I used stack-in-card to get rid of the space between cards. The rest is pretty easy.

- type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: binary_sensor.raccolta_differenziata_carta
        primary_info: none
        secondary_info: none
        layout: vertical
        icon_color: indigo
      - type: custom:mushroom-entity-card
        entity: binary_sensor.raccolta_differenziata_organico
        primary_info: none
        secondary_info: none
        layout: vertical
        icon_color: red
      - type: custom:mushroom-entity-card
        entity: binary_sensor.raccolta_differenziata_plastica
        primary_info: none
        secondary_info: none
        layout: vertical
        icon_color: yellow
      - type: custom:mushroom-entity-card
        entity: binary_sensor.raccolta_differenziata_residuo
        primary_info: none
        secondary_info: none
        layout: vertical
        icon_color: lime

[Ayrton31]

I clearly like it 👍
Thanks a lot for this good advise

[Gitonthegrid]

I have to same thing.
It is pretty easy to do with a template card. Even the color change when you click on a room, so yo can see in which room you are.
Let me know if you want the code (I am not at home now). Its way more simple then you might think.

[Ayrton31]

Hello, yes interesting to view your code. Thank you.

[Gitonthegrid]

@piitaya This way you can create a sort of "fake" navigation bar. It works really well, because you can see which room you are in.
Maybe this is something to add somewhere in the Wiki, so people know how to create it? Its really simple and only comes down to change the color of the view you are in. So its looks like switching between buttons/rooms, but what you are really doing is creating a static color for that specific view.

@Ayrton31

Here is the code. You have to change the primary to the roomname you want, change the icons to the icons you want, change the navigation_path to the same name as the primary name. The icon_color is the only thing you have to set per view you are in. So if you are in the roomname 1 view, you have to change that color to the color you like. the rest of the rooms should have no color or a different color you like ( I always leave them blanc, to give them the greyed out look).

So in the case of this code. You have to make 3 tabs (views) in your lovelace called roomname 1, roomname 2, roomname 3 (or change it straight away to the roomnames you want.)

If you are in the tab (view) roomname 1, then you only have to change the icon color for that view in this code the rest of the rooms in the code should have no color.
then on the roomname2 tab (view), you do the same thing by changing the color of roomname2 in the code en you clear/ delete the other colors of roomname 1 and 2. etc.

This way you get the visual effect of of changing rooms, But what your are actually doing is creating a static color for that specific tab (view).

If you still not now what I mean, or how it works, then I will make a other post and try to explain a bit better. But I think you will get the idea.

NOTE: Create a Horizontal stack card, and paste the code below (and change it to your needs)

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: ROOMNAME 1
    secondary: ''
    icon: mdi:home
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: ROOMNAME 1
    icon_color: blue
  - type: custom:mushroom-template-card
    primary: ROOMNAME 2
    secondary: ''
    icon: mdi:home
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: ROOMNAME 2
    icon_color: ''
  - type: custom:mushroom-template-card
    primary: ROOMNAME 3
    secondary: ''
    icon: mdi:home
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: ROOMNAME 3
    icon_color: ''