Navbar card: easily navigate through dashboards

Hey everyone! :wave:

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.

Mobile view:

Desktop view:

Give it a try and let me know your thoughts!

Cheers, Jose

8 Likes

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

1 Like

Are there plans to enable colored icons in the future?

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 :slight_smile:

2 Likes

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

1 Like

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

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

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”

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.

1 Like

Thank you so much @davidnestico !

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 :smiley:

3 Likes

:art: 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.

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

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);
  }

3 Likes

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);
  }
3 Likes

:pill::pill::pill::joy:

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

1 Like

LOL this is why you always proof read damn :person_facepalming:

1 Like

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. :slight_smile:

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

1 Like

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
1 Like

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 :smiley:

2 Likes