navbar-card

To avoid repeating configuration across multiple dashboards, you can use templates. A template allows you to define a common configuration once and reference it in any navbar-card within the same dashboard. When you update the template, all cards using it are updated automatically.

type: custom:navbar-card
template: my_template

When writing JavaScript templates, you have access to four predefined global variables:

Use these variables to drive logic, such as checking entity states, user permissions, or whether the user is on a desktop device.

Properties defined directly within a navbar-card instance take priority over those inherited from the template. This allows you to use a standard template while applying specific overrides (such as custom CSS styles) to individual cards.

For example, you can use a template but override the primary color using the styles property.

type: custom:navbar-card
template: your_template_name
styles: |
  .navbar {
    --navbar-primary-color: red;
  }

The media_player configuration enables a widget that displays media playback information above or alongside the navbar.

Key Behaviors:

• Visibility: The widget automatically appears when any configured player is in a playing or paused state. You can override this using the show option.
• Multiple Players: If you provide multiple players in the players array, the widget renders as a carousel with dot indicators and supports swipe/drag navigation.
• Desktop vs. Mobile: On desktop, you can specify the position using desktop_position. On mobile, the widget is always displayed at the bottom of the view.

media_player:
  players:
    - entity: media_player.living_room

You can customize the Navbar Card's appearance using two methods:

1. CSS Variables: Use these to modify predefined theme properties like colors and border radii.
2. Direct CSS: Use this to apply custom styles to specific classes like .navbar-card or .navbar.

Both methods are applied via the styles key.

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

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

Templates must be defined under the navbar-templates key at the top level of your dashboard's Raw Configuration Editor.

Steps to add a template:

1. Open your dashboard.
2. Click the three dots menu (⋮) in the top right.
3. Select "Edit Dashboard".
4. Click the three dots menu (⋮) again.
5. Select "Raw Configuration Editor".
6. Add your navbar-templates block at the very 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
  ...

If you need granular control over dashboard spacing, you can disable the automatic padding feature and use card-mod with a custom Home Assistant theme to apply manual CSS.

First, disable the automatic feature in your card configuration:

type: custom:navbar-card
layout:
  auto_padding:
    enabled: false # Disable automatic padding

To prevent the navbar-card from overlapping with other dashboard cards, use the automatic padding feature. This feature is enabled by default and automatically adjusts padding based on the navbar's position (top, bottom, left, or right) and device type (desktop vs. mobile).

Key behaviors:

• Desktop: Adds padding relative to the desktop.position setting.
• Mobile: Adds bottom padding to prevent overlap with bottom-docked navbars.
• Media player widget: If a media player widget is visible, you can specify extra padding using layout.auto_padding.media_player_px to ensure both the navbar and media player remain clear of dashboard cards.

type: custom:navbar-card
layout:
  auto_padding:
    enabled: true
    media_player_px: 80 # Example value for media player clearance

You can predefine custom configurations for navbar-card using the navbar-templates key in your dashboard's YAML configuration. This allows you to reuse the same navigation structure across multiple dashboards and update them all at once by modifying a single template.

To define templates, open your dashboard, select "Edit YAML" from the menu, and add a navbar-templates section at the top level of your configuration.

navbar-templates:
   your_template_name:
      routes:
         - label: Home
           icon: mdi:home
           url: /lovelace/home
         - label: Settings
           icon: mdi:cog
           url: /lovelace/settings

views:
  - title: Home
    cards: ...