Frequently asked questions¶
General questions¶
Do I need to copy and paste the configuration every time?
No! Use navbar templates to set up a navbar once and reuse it on all your dashboards. Any changes to the template apply to every navbar using it.
Where do I create and edit templates?
In the visual editor of any navbar, from its Template section. See navbar templates.
How do I customize the appearance?
Navbar Card can be styled with CSS variables or direct CSS through the styles option. See the Styles for all classes and variables.
How do I make the navbar responsive?
Navbar Card is responsive by default, but you can customize behavior for different screen sizes:
type: custom:navbar-card
desktop:
position: left
min_width: 1024 # Switch to desktop mode at 1024px
show_labels: true
mobile:
show_labels: false
The card will automatically switch between desktop and mobile layouts based on screen size.
Advanced features¶
Can I add dynamic content?
Yes! Use JavaScript templates to create dynamic content. See JavaScript templates for more examples.
How do I add custom actions?
Navbar Card supports various action types when interacting with a route or popup item. You can either configure the tap action, hold action or double tap action to your liking. Head over to the Custom actions page for more information.
Troubleshooting¶
My cards are hidden behind the navbar
How do I hide Home Assistant's native tabs?
See Hide the native tabs.
The navbar isn't showing up
Try these steps:
-
Verify installation:
- Check HACS for successful installation
- Confirm resource is added in Dashboard Resources
- Clear browser cache and reload
-
Check configuration:
- Validate YAML syntax
- Ensure required fields are present
- Check browser console for errors (F12)
-
Still not working?
- Try a minimal configuration first
- Check version compatibility
- Report the issue on GitHub
Can't find the answer you're looking for?¶
If you're still having issues, head over to the Contact page.