Skip to main content

Frequently Asked Questions

Home Assistant Community Forum GitHub Issues

General Questions​

Do I need to copy and paste the configuration every time?

No! You can use templates to define a common configuration and reuse it across multiple dashboards. Any changes to the template automatically apply to every navbar-card using it in the current dashboard.

Example template usage:

type: custom:navbar-card
template: my_template
Where do I put the template configuration?

Templates go under the navbar-templates key in your main Lovelace YAML configuration:

  1. Open your dashboard
  2. Click the three dots menu (⋮) in the top right
  3. Select "Edit Dashboard"
  4. Click the three dots menu (⋮) in the top right once again
  5. Click "Raw Configuration Editor"
  6. Add your template at the top of the file:
navbar-templates:
  my_template:
    desktop:
      show_labels: true
    mobile:
      show_labels: false
    routes:
      - icon: mdi:home
        url: /lovelace/home
        label: Home
views:
  # Your normal lovelace configuration
  ...
How do I customize the appearance?

Navbar Card offers several ways to customize its appearance:

  1. CSS Variables

    type: custom:navbar-card
    styles: |
      .navbar {
        --navbar-primary-color: #4CAF50;
        --navbar-border-radius: 16px;
      }

  2. Direct CSS

    type: custom:navbar-card
    styles: |
      .navbar-card {
        background: rgba(0,0,0,0.7);
        backdrop-filter: blur(10px);
      }

See the Styles Configuration for more options.

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:
  position: bottom
  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:

type: custom:navbar-card
routes:
  - icon: mdi:thermometer
    label: |
      [[[
        const temp = states['sensor.temperature'].state;
        return `Temperature: ${temp}°C`;
      ]]]

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​

The navbar isn't showing up

Try these steps:

  1. Verify installation:

    • Check HACS for successful installation
    • Confirm resource is added in Dashboard Resources
    • Clear browser cache and reload

  2. Check configuration:

    • Validate YAML syntax
    • Ensure required fields are present
    • Check browser console for errors (F12)

  3. 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.