Navbar Card

navbar-card is a custom Lovelace card that adds a navigation bar to your Home Assistant dashboards.

Inspired by Adaptive Mushroom and Material Design. Minimal, responsive, and easy to configure.

Get started Browse examples

Why Navbar Card?

• Unified navigation

  ---

  Across all your dashboards, with popups and badges for each route.

  Routes

• Responsive layout

  ---

  Automatically adapts to screen size, on desktop and mobile.

  Desktop · Mobile

• Reusable templates

  ---

  Set up a navbar once and reuse it on all your dashboards.

  Navbar templates

• Customizable actions

  ---

  Tap, hold and double tap actions for every route and popup item.

  Custom actions

• Icons and styles

  ---

  Colors, sizes and shapes through CSS variables and classes.

  Styles

• Media player

  ---

  A media player widget above or alongside the navbar.

  Media player

Quick start

1. Install the card through HACS.
2. Add it to your dashboard.
3. Configure your routes, or start from an example.

type: custom:navbar-card
desktop:
  position: left
  show_labels: true
routes:
  - url: /lovelace/home
    icon: mdi:home
    label: Home
  - url: /lovelace/devices
    icon: mdi:devices
    label: Devices
  - url: /config/dashboard
    icon: mdi:cog
    label: Settings

Community

• Community forum

  ---

  Questions, ideas and showcases on the Home Assistant forum.

  Join the thread

• GitHub

  ---

  Report bugs, request features or contribute.

  Repository

• Support

  ---

  If you enjoy using Navbar Card, you can find ways to support the project here.

  Support the project