🧭 Navbar card: easily navigate through dashboards

[joseluis9595 (Jose Álvarez)]

Hey everyone!

I just released a new custom card called Navbar Card. It’s a responsive navigation bar for your Home Assistant dashboards, heavily inspired by Adaptive Mushroom. It adapts to both mobile and desktop views, making navigation smoother.

I’ll leave the link to the repo here along with a couple of screenshots.

GitHub - joseluis9595/lovelace-navbar-card: Custom lovelace card that displays a bottom nav in...

Mobile view:

Desktop view:

Give it a try and let me know your thoughts!

Cheers, Jose

[frandieguez (Fran Diéguez)]

Mhhh, interesting… I’ll try it right away and keep you informed about bugs or requests

[freibiergesicht]

Are there plans to enable colored icons in the future?

[joseluis9595 (Jose Álvarez)]

You mean as in changing the color of the selected icon, or changing the color of each individual one? Right now the selected icon uses the dashboard’s main color, but I’m planning on adding support to easily change styles of the whole card

[deluxestyle]

is there a way to add a kind of “back” button?
I like the card

[joseluis9595 (Jose Álvarez)]

@deluxestyle when editing a view in your dashboard, you have a boolean setting called “Subview”. Might be what you are looking for!

[deluxestyle]

I know that. but I want to have it on every page. I do it currently with mushroom-chips-card

[joseluis9595 (Jose Álvarez)]

Not really sure how to make it fit in with the card in its current state, but I can look into making the card a bit more customizable to allow “custom buttons”

[davidnestico]

Looks good and is working great so far!

Hopefully you add more styling options in future updates, would love a iOS style blurred background option.

[joseluis9595 (Jose Álvarez)]

Thank you so much @davidnestico !

@davidnestico

Hopefully you add more styling options in future updates, would love a iOS style blurred background option.

Yes, I’m debating on how to allow custom styling for the card, as I want to keep separate styling options for the mobile and desktop variants of the card.

Right now though, using card_mod you can just kinda make what you said, but the changes will apply to both variants…

type: custom:navbar-card
...
card_mod:
  style: |
    ha-card {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      backdrop-filter: blur(10px) !important;
    }

I’ll keep you guys updated when these new styling options are implemented

[joseluis9595 (Jose Álvarez)]

Custom styles

Hi everyone!

I’m excited to share a new release of the card, now with support for custom styles via CSS!

Check out the documentation for examples and detailed instructions on how to configure it.

@davidnestico

would love a iOS style blurred background option

Also, here’s a quick implementation of what you said, feel free to tweak it to your liking

type: custom:navbar-card
...
styles: |
  .navbar.desktop {
    --navbar-primary-color: black;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(30px);
    border: none;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }

[davidnestico]

Awesome, looks great! I did make some minor modifications though haha…

Theme variables:

Light mode
nav-background: “rgba(239,239,239,0.50)”
Dark mode
nav-background: “rgba(20, 20, 20,0.50)”

styles: |
  .navbar {
    background: var(--nav-background);
    backdrop-filter: blur(33px);
    '-webkit-backdrop-filter': blur(33px) !important; !important;
    background-blend-mode: overlay;
    border: none;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }

[joseluis9595 (Jose Álvarez)]

@davidnestico

some minor medications

Looks good though! Really nice choice going for an iOS style card

[davidnestico]

LOL this is why you always proof read damn

[Butterz (Roli)]

Great Work, thank you.

It would be also great if there is a possibility to call a service (for ex. start PopUp via Browser-Mods) or implement Dropdown Menu.

Other then that its working good and also css-styling is working as well!

[joseluis9595 (Jose Álvarez)]

@Butterz

It would be also great if there is a possibility to call a service

Check out the latest relase. I’ve just added support to configure custom tap_action for each of the routes of your navbar card!

type: custom:navbar-card
routes:
  ...
  - icon: mdi:information-outline
    label: Config
    tap_action:
      action: navigate
      navigation_path: /config/dashboard

[joseluis9595 (Jose Álvarez)]

Template support

Hi everybody! Take a look at the latest release: Release NavBar card v0.1.0 · joseluis9595/lovelace-navbar-card · GitHub

You can now create template configurations so that using and mantaining navbar-card becomes quite a lot easier. Feel free to ask any questions

[deluxestyle]

great card.
but I still have the overlap in the mobile view. I tried to use the card mod tweak, but it is still there. any idea what I could do?

[joseluis9595 (Jose Álvarez)]

You’re probably not using sections view for your dashboard, right? Just realized my card-mod snippet assumes everyone is using sections

I’ll try to update the README tomorrow with a valid snippet for any dashboard type

[deluxestyle]

I‘m using sections