Was macht die Sidebar-Card?

Die Sidebar-Card ergänzt Lovelace um eine feste Navigation am linken Rand. Auf Wandtablets ersetzt sie oft die Standardnavigation und zeigt gleichzeitig Datum, Uhrzeit, Statusmeldungen und Schnellzugriffe an.

Installation über HACS

  1. HACS öffnen und die Sidebar Card als Custom Repository hinzufügen.
  2. Frontend-Ressource prüfen, falls HACS sie nicht automatisch anlegt.
  3. Dashboard im YAML-Modus oder im Raw-Konfigurationseditor öffnen.
  4. Die Sidebar-Konfiguration auf oberster Ebene des Dashboards einfügen.

Vollständige Sidebar-Konfiguration

Dieses Beispiel enthält lokale Links zu den Haus-Views, eine dynamische Statusmeldung und eine kleine Bottom Card. Passe Pfade und Entities an dein Dashboard an.

YAML-Hilfe

Vor dem Einsetzen kurz prüfen

  • Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
  • Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
  • Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.
YAML
sidebar:
  width:
    mobile: 0
    tablet: 22
    desktop: 18
  digitalClock: true
  date: true
  dateFormat: dddd, DD. MMMM
  clock: true
  sidebarMenu:
    - action: navigate
      navigation_path: /dashboard-haus/haus
      name: Home
      icon: mdi:home
    - action: navigate
      navigation_path: /dashboard-haus/licht
      name: Licht
      icon: mdi:lightbulb-group
    - action: navigate
      navigation_path: /dashboard-haus/kamera
      name: Kamera
      icon: mdi:cctv
    - action: navigate
      navigation_path: /dashboard-haus/fenster-turen
      name: Fenster + Türen
      icon: mdi:door
    - action: navigate
      navigation_path: /dashboard-haus/batterie
      name: Batterie
      icon: mdi:battery-heart
  template: |
    {% set lights = states.light | selectattr('state', 'eq', 'on') | list | count %}
    {% set doors = states.binary_sensor
      | selectattr('entity_id', 'search', 'tur|door|fenster|window')
      | selectattr('state', 'eq', 'on')
      | list | count %}
    {% if doors > 0 %}
      Achtung: {{ doors }} Kontakt(e) offen.
    {% elif lights > 0 %}
      {{ lights }} Licht(er) eingeschaltet.
    {% else %}
      Alles ruhig.
    {% endif %}
  bottomCard:
    type: custom:mushroom-template-card
    primary: System
    secondary: "{{ states('sensor.home_assistant_core_cpu_percent') }} % CPU"
    icon: mdi:server
    tap_action:
      action: navigate
      navigation_path: /config/dashboard

Design und Lesbarkeit

Eine Sidebar muss auf Abstand lesbar sein. Verwende kurze Namen, eindeutige Icons und maximal fünf bis sieben Hauptpunkte. Für mobile Ansichten sollte die Sidebar deaktiviert oder sehr schmal sein.

YAML-Hilfe

Vor dem Einsetzen kurz prüfen

  • Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
  • Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
  • Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.
YAML
card_mod:
  style: |
    :host {
      --sidebar-background: #0f172a;
      --sidebar-text-color: #e2e8f0;
      --sidebar-icon-color: #67e8f9;
      --sidebar-selected-background: rgba(103, 232, 249, .16);
      --sidebar-selected-text-color: #ffffff;
    }

Typische Fehler

  • Falsche Dashboard-Pfade: Öffne die Zielseite und kopiere den Pfad aus der Browserzeile.
  • Zu viele Menüpunkte: Die Sidebar soll Navigation vereinfachen, nicht jedes Gerät zeigen.
  • Mobile Breite vergessen: Auf Smartphones kann eine Desktop-Sidebar den Inhalt verdrängen.

Eine komplette reale Sidebar-Umsetzung findest du zusätzlich im Artikel Sidebar.