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.
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
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
3 Likes
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
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
davidnestico:
some minor medications
Looks good though! Really nice choice going for an iOS style card
1 Like
LOL this is why you always proof read damn
1 Like
Butterz
(Roli)
January 27, 2025, 11:09am
15
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!
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
2 Likes