Configuration Reference

Navbar Card's configuration is structured into logical sections, making it easy to customize different aspects of the card:

Name	Type	Default	Description
routes	Routes	Required	Array of navigation items to display in the navbar
desktop	Desktop	-	Desktop-specific layout and behavior settings
mobile	Mobile	-	Mobile-specific layout and behavior settings
layout	Layout	-	General layout configuration
styles	Styles	-	Custom CSS styling options
template	Template	-	Predefined template to use as base configuration
haptic	Haptic	-	Configure haptic feedback on interactions
media_player	Media Player	-	[BETA] Media player integration for mobile view

Basic Example

Here's a basic configuration example for navbar-card:

type: custom:navbar-card
haptic:
  url: false
  tap_action: false
  hold_action: true
  double_tap_action: true
desktop:
  position: left
  show_labels: true
mobile:
  show_labels: false
media_player:
  entity: media_player.your_media_player
  album_cover_background: true
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
    hold_action:
      action: navigate
      navigation_path: /config/devices/dashboard
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - icon: mdi:dots-horizontal
    label: More
    tap_action:
      action: open-popup
    popup:
      - icon: mdi:cog
        url: /config/dashboard
      - icon: mdi:hammer
        url: /developer-tools/yaml
      - icon: mdi:power
        tap_action:
          action: call-service
          service: homeassistant.restart
          service_data: {}
          confirmation:
            text: Are you sure you want to restart Home Assistant?
styles: |
  .navbar {
    --navbar-primary-color:rgb(0, 0, 0);
  }
  .navbar-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
  }