Skip to content

Examples

Click any example to preview it and copy its YAML configuration.

Basics, routes & badges

Basic ExampleBasic ExampleBasic ExampleA simple navigation bar with the most common routes and options, and one useful popup menu

Display route only for a given userDisplay route only for a given userDisplay route only for a given userNavigation bar with a "settings" route only displayed for the user "jose"

Manually control when a route is selectedManually control when a route is selectedManually control when a route is selectedNavigation bar with a route with no url property, so we'll manually choose when it should be selected

Route with rounded user's imageRoute with rounded user's imageRoute with rounded user's imageNavigation bar with a "more" route with the current user's image rounded

Badge with number of lights onBadge with number of lights onBadge with number of lights onNavigation bar with a badge showing the number of lights that are currently on

Styling

Custom Primary ColorCustom Primary ColorCustom Primary ColorNavigation bar with a custom red primary color

Custom Background ColorCustom Background ColorCustom Background ColorNavigation bar with a black background

Custom Selected ColorCustom Selected ColorCustom Selected ColorNavigation bar with a custom different selected color for each route

Desktop specific stylesDesktop specific stylesDesktop specific stylesNavigation bar with no rounded corners only in desktop mode

iOS glass effectiOS glass effectiOS glass effectNavigation bar with a iOS glassmorphism style

Neumorphic styleNeumorphic styleNavigation bar with a neumorphic style

Label on the selected routeLabel on the selected routeLabel on the selected routeIcon-only routes on mobile, with the label shown next to the selected icon

Media player

Media player displayed only on desktopMedia player displayed only on desktopMedia player displayed only on desktopNavigation bar with a media player displayed only on desktop, placed at the bottom right

Control when the media player is displayedControl when the media player is displayedControl when the media player is displayedDisplay media player only when it is playing or it's been paused for less than 5 minutes using the "show" property

Basic Example

A simple navigation bar with the most common routes and options, and one useful popup menu

Basic Example Basic Example

type: custom:navbar-card
desktop:
  position: left
  show_labels: true
mobile:
  show_labels: false
routes:
  - icon: mdi:home-outline
    icon_selected: mdi:home
    url: /lovelace/home
    label: Home
  - icon: mdi:devices
    url: /lovelace/devices
    label: Devices
  - icon: mdi:creation-outline
    icon_selected: mdi:creation
    url: /config/automation/dashboard
    label: Automations
  - icon: mdi:cog
    url: /config/dashboard
    label: Settings
  - icon: mdi:dots-horizontal
    label: More
    tap_action:
      action: open-popup
    popup:
      - icon: mdi:hammer
        label: DevTools
        url: /developer-tools/yaml
      - icon: mdi:power
        label: Restart
        tap_action:
          action: call-service
          service: homeassistant.restart
          service_data: {}
          confirmation:
            text: Are you sure you want to restart Home Assistant?

Display route only for a given user

Navigation bar with a "settings" route only displayed for the user "jose"

Display route only for a given user Display route only for a given user

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
    hidden: |
      [[[ return user.name != "jose"]]]
  - icon: mdi:information
    label: More
    url: /config/info

Manually control when a route is selected

Navigation bar with a route with no url property, so we'll manually choose when it should be selected

Manually control when a route is selected Manually control when a route is selected

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
  - icon: mdi:creation
    label: Automations
    tap_action:
      action: navigate
      url: /lovelace/home/control
    selected: |
        [[[ return window.location.pathname == "/lovelace/home/control" ]]]
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - icon: mdi:information
    label: More
    url: /config/info

Route with rounded user's image

Navigation bar with a "more" route with the current user's image rounded

Route with rounded user's image Route with rounded user's image

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - image: |
      [[[ 
        return hass.states["person.jose"].attributes.entity_picture
      ]]]
    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: |
  .image {
    border-radius: 16px !important;
  }

Badge with number of lights on

Navigation bar with a badge showing the number of lights that are currently on

Badge with number of lights on Badge with number of lights on

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
    badge:
      show: >-
        [[[
          // Store the light entities in a variable to avoid recomputing them on each render
          if (!this._lightEntities) {
            this._lightEntities = Object.keys(hass.states).filter(id => id.startsWith('light.'));
          }
          return this._lightEntities.filter(id => hass.states[id].state === 'on').length > 0;
        ]]]
      count: >-
        [[[
          // Store the light entities in a variable to avoid recomputing them on each render
          if (!this._lightEntities) {
            this._lightEntities = Object.keys(hass.states).filter(id => id.startsWith('light.'));
          }
          return this._lightEntities.filter(id => hass.states[id].state === 'on').length;
        ]]]
  - url: /lovelace/home/control
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - icon: mdi:information
    label: More
    url: /config/info

Custom Primary Color

Navigation bar with a custom red primary color

Custom Primary Color Custom Primary Color

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - icon: mdi:information
    label: More
    url: /config/info
styles: |
  .navbar {
    --navbar-primary-color: red;
  }

Custom Background Color

Navigation bar with a black background

Custom Background Color Custom Background Color

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - icon: mdi:information
    label: More
    url: /config/info
styles: |
  .navbar-card {
    background-color: black;
  }

Custom Selected Color

Navigation bar with a custom different selected color for each route

Custom Selected Color Custom Selected Color

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
    selected_color: "#E57373"
    selected: true       # hardcoded to true for demo purposes
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
    selected_color: "#64B5F6"
    selected: true       # hardcoded to true for demo purposes
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
    selected_color: "#81C784"
    selected: true       # hardcoded to true for demo purposes
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
    selected_color: "#FBC02D"
    selected: true       # hardcoded to true for demo purposes
  - icon: mdi:information
    label: More
    url: /config/info
    selected_color: "#BA68C8"
    selected: true       # hardcoded to true for demo purposes

Desktop specific styles

Navigation bar with no rounded corners only in desktop mode

Desktop specific styles Desktop specific styles

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - icon: mdi:information
    label: More
    url: /config/info
styles: |
  .navbar-card.desktop {
    border-radius: 0px;
  }

iOS glass effect

Navigation bar with a iOS glassmorphism style

iOS glass effect iOS glass effect

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - icon: mdi:information
    label: More
    url: /config/info
styles: |
  .navbar-card{
    background: rgba(255,255,255,0.5);
    --navbar-border-radius: 36px;
    backdrop-filter: blur(33px);
    -webkit-backdrop-filter: blur(33px);
    border: none;
  }
  .button {
    border-radius: 22px;
  }

Neumorphic style

Navigation bar with a neumorphic style

Neumorphic style

type: custom:navbar-card
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/home/devices
    icon: mdi:devices
    label: Devices
  - url: /config/automation/dashboard
    icon: mdi:creation
    label: Automations
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings
  - icon: mdi:information
    label: More
    url: /config/info
styles: |-
  :host {
    --shadow-dark: color-mix(in srgb, var(--primary-text-color) 20%, transparent);
    --shadow-light: color-mix(in srgb, var(--card-background-color) 85%, white 15%);
    --background-color: color-mix(
      in srgb,
      var(--card-background-color) 92%,
      var(--primary-text-color) 8%
    );
  }


  ha-card {
    background: var(--background-color) !important;
    backdrop-filter: blur(16px);
    border: none !important;
    box-shadow: none !important;
  }

  ha-ripple {
    display: none !important;
  }

  .route {
    padding: 5px;
  }

  .button {
    background: var(--background-color);
    border-radius: 12px;
    box-shadow:
      3px 3px 6px var(--shadow-dark),
      -3px -3px 6px var(--shadow-light);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .button:hover,
  .button:active,
  .button.active {
    background: unset;
    box-shadow:
      inset 2px 2px 4px var(--shadow-dark),
      inset -2px -2px 4px var(--shadow-light);
    transform: translateY(1px);
  }

Label on the selected route

Icon-only routes on mobile, with the label shown next to the selected icon

Label on the selected route Label on the selected route

type: custom:navbar-card
mobile:
  show_labels: true
  safe_area: true
routes:
  - icon: mdi:home-outline
    icon_selected: mdi:home
    url: /lovelace/home
    label: Home
  - icon: mdi:devices
    url: /lovelace/devices
    label: Devices
  - icon: mdi:creation-outline
    icon_selected: mdi:creation
    url: /config/automation/dashboard
    label: Automations
  - icon: mdi:cog
    url: /config/dashboard
    label: Settings
styles: |
  .mobile .route:not(.active) .label {
    display: none;
  }
  .mobile .route.active {
    flex: none;
    flex-direction: row;
    gap: 4px;
    width: auto;
    height: 40px;
    margin: auto 4px;
    padding: 0 16px 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--navbar-primary-color) 20%, transparent);
  }
  .mobile .route.active .button {
    width: 32px;
    background: none;
  }
  .mobile .route.active .label {
    flex: none;
    width: auto;
    font-size: 14px;
  }

Media player displayed only on desktop

Navigation bar with a media player displayed only on desktop, placed at the bottom right

Media player displayed only on desktop Media player displayed only on desktop

type: custom:navbar-card
desktop:
  position: left
  show_labels: false
routes:
  - icon: mdi:home-outline
    icon_selected: mdi:home-assistant
    url: /lovelace/home
    label: Home
  - icon: mdi:devices
    url: /lovelace/devices
    label: Devices
  - icon: mdi:thermometer
    url: /lovelace/weather
    label: Weather
  - icon: mdi:creation-outline
    icon_selected: mdi:creation
    url: /lovelace/control
    label: Control
  - icon: mdi:information
    label: More
    url: /config/info
media_player:
  players:
    - entity: media_player.test_media_player
  album_cover_background: true
  show: "[[[return navbar.isDesktop]]]"
  desktop_position: bottom-right

Control when the media player is displayed

Display media player only when it is playing or it's been paused for less than 5 minutes using the "show" property

Control when the media player is displayed Control when the media player is displayed

type: custom:navbar-card
desktop:
  position: left
  show_labels: false
routes:
  - icon: mdi:home-outline
    icon_selected: mdi:home-assistant
    url: /lovelace/home
    label: Home
  - icon: mdi:devices
    url: /lovelace/devices
    label: Devices
  - icon: mdi:thermometer
    url: /lovelace/weather
    label: Weather
  - icon: mdi:creation-outline
    icon_selected: mdi:creation
    url: /lovelace/control
    label: Control
  - icon: mdi:information
    label: More
    url: /config/info
media_player:
  players:
    - entity: media_player.test_media_player
      show: |-
        [[[
          const mediaPlayerState = states['media_player.test_media_player'];
          const lastChanged = new Date(mediaPlayerState.last_changed);
          const now = Date.now();
          const fiveMinutes = 5 * 60 * 1000;

          // Display media player if it's playing OR paused in the last 5 minutes
          return (
            mediaPlayerState.state == 'playing' ||
            (mediaPlayerState.state == 'paused' &&
              (now - lastChanged) <= fiveMinutes)
          );
        ]]]
  album_cover_background: true
  desktop_position: bottom-right