Shortcut menu bar

buttons_shortcut_menu.yaml

type: vertical-stack
cards:

  - type: custom:stack-in-card
    mode: horizontal
    keep:
      background: true
    cards:

    #history.back(-1)
      - type: custom:button-card
        template: button_shortcut_menu
        tooltip: Back
        icon: mdi:arrow-left
        show_name: false
        tap_action:
          action: toggle
        entity: input_boolean.back_button
        variables:
          back: |
            [[[
             if (entity.state === 'on') {history.back() ;}
            ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        variables:
           path: home
        tooltip: >
         [[[ return variables.view === variables.path
             ? 'Hassio' : 'Home'; ]]]
        icon: >
            [[[ return variables.view === variables.path
                ? 'mdi:home-assistant' : 'mdi:home'; ]]]
        tap_action:
          action: navigate
          navigation_path: >
            [[[ return variables.view === variables.path
                ? '/ui-data/home_assistant' : '/ui-overview/home'; ]]]
        styles:
          icon:
            - color: >
                [[[ return (states['sensor.count_alerts_notifying'].state > 0)
                    ? 'red': 'green'; ]]]
        state:
          - operator: template
            value: >
              [[[ return (states['sensor.count_alerts_notifying'].state > 0); ]]]
            spin: true

      - type: custom:button-card
        template: button_shortcut_menu
        variables:
          path: lights
        tooltip: >
          [[[ return variables.view === variables.path
              ? 'Light settings' : 'Lights'; ]]]
        icon: >
            [[[ return variables.view === variables.path
                ? 'mdi:home-lightbulb' : 'mdi:light-switch'; ]]]
        tap_action:
          action: navigate
          navigation_path: >
            [[[ return variables.view === variables.path
                ? '/ui-settings/light_settings' : '/ui-overview/lights'; ]]]
        styles:
          icon:
            - color: >
                [[[ return (states['group.all_inside_lights'].state === 'on')
                    ? 'gold': 'grey'; ]]]

    #      - type: custom:button-card
    #        template: button_shortcut_menu
    #        icon: mdi:thermometer-lines
    #        tap_action:
    #          action: navigate
    #          navigation_path: home_climate
    #        variables:
    #          path: home_climate
    #        styles:
    #          icon:
    #            - color: >
    #                [[[ return states['sensor.inside_temperature_color_name'].state ]]]

#      - type: custom:button-card
#        template: button_shortcut_menu
#        variables:
#          path: home_summary
#        tooltip: >
#          [[[ return variables.view === variables.path
#              ? 'Groups' : 'Summary'; ]]]
#        icon: >
#            [[[ return variables.view === variables.path
#                ? 'mdi:view-dashboard-variant' : 'mdi:home-outline'; ]]]
#        tap_action:
#          action: navigate
#          navigation_path: >
#            [[[ return variables.view === variables.path
#                ? '/ui-data/summary_groups' : '/ui-overview/home_summary'; ]]]
#        styles:
#          icon:
#            - color: >
#                [[[ return (states['sensor.hubs_badge'].state > 0 ||
#                            states['sensor.critical_badge'].state > 0)
#                    ? 'red' : 'var(--secondary-text-color)'; ]]]
#          card:
#            - animation: >
#                [[[ return (states['sensor.hubs_badge'].state > 0 ||
#                            states['sensor.critical_badge'].state > 0)
#                    ? 'blink 2s ease infinite' :'none'; ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        variables:
          path: home_summary
        tooltip: >
          [[[ return variables.view === variables.path
              ? 'Travel' : 'Summary'; ]]]
        icon: >
          [[[ return variables.view === variables.path
              ? 'mdi:sign-direction' : states['sensor.presence_icon'].state ]]]
        tap_action:
          action: navigate
          navigation_path: >
            [[[ return variables.view === variables.path
                ? '/ui-overview/travel' : '/ui-overview/home_summary'; ]]]
        styles:
          icon:
            - color: >
                [[[ return states['sensor.family_home'] &&
                           states['sensor.family_home'].attributes.icon_color ?
                    states['sensor.family_home'].attributes.icon_color : 'black'; ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        variables:
          path: weer_klimaat
        tooltip: >
          [[[ return variables.view === variables.path
              ? 'Heater' : 'Weer'; ]]]
        icon: >
            [[[ return variables.view === variables.path
                ? 'mdi:radiator' : states['sensor.weather_icon'].state; ]]]
        tap_action:
          action: navigate
          navigation_path: >
            [[[ return variables.view === variables.path
                ? '/ui-settings/climate_settings' : '/ui-overview/weer_klimaat'; ]]]
        styles:
          icon:
            - color: >
                [[[ return states['sensor.temperature_color_name'].state; ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        variables:
          path: alarmclock
        tooltip: >
          [[[ return variables.view === variables.path
              ? 'Set alarm' : 'Alarm'; ]]]
        icon: >
          [[[ return variables.view === variables.path
              ? 'mdi:alarm-note'
              : (states['sensor.next_alarm'].state === 'Not set')
              ? 'mdi:alarm-off' : 'mdi:alarm'; ]]]
        tap_action:
          action: navigate
          navigation_path: >
            [[[ return variables.view === variables.path
                ? '/ui-settings/alarmclock_settings' : '/ui-overview/alarmclock'; ]]]
        styles:
          icon:
            - color: >
                [[[ return (states['sensor.next_alarm'].state === 'Not set')
                    ? 'green' : 'red'; ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        variables:
          path: calendar
        tooltip: >
          [[[ return variables.view === variables.path
              ? 'Time' : 'Calendar'; ]]]
        icon: >
            [[[ return variables.view === variables.path
                ? states['sensor.hour_icon'].state : 'mdi:calendar'; ]]]
        tap_action:
          action: navigate
          navigation_path: >
            [[[ return variables.view === variables.path
                ? '/ui-data/time' : '/ui-overview/calendar'; ]]]
        styles:
          icon:
            - color: >
                [[[ return states['sensor.trash_color'].state; ]]]

      - type: custom:state-switch
        entity: group
        states:
          admin:
            type: custom:button-card
            template: button_shortcut_menu
            variables:
              path: settings
            tooltip: >
              [[[ return variables.view === variables.path
                  ? 'Energy' : 'Settings'; ]]]
            icon: >
              [[[ return variables.view === variables.path
                  ? 'mdi:flash' : 'mdi:tools'; ]]]
            tap_action:
              action: navigate
              navigation_path: >
                [[[ return variables.view === variables.path
                    ? '/ui-data/energy' : '/ui-settings/settings'; ]]]

          user:
            type: custom:button-card
            template: button_shortcut_menu
            variables:
              path: intercom
            tooltip: Intercom
            icon: mdi:account-voice
            tap_action:
              action: navigate
              navigation_path: /ui-overview/intercom

      - type: custom:state-switch
        entity: group
        states:
          admin:
            type: custom:button-card
            template: button_shortcut_menu
            variables:
              path: develop
            tooltip: >
              [[[ return variables.view === variables.path
                  ? 'Force' : 'Develop'; ]]]
            icon: >
              [[[ return variables.view === variables.path
                  ? 'mdi:cog-refresh' : 'mdi:remote-desktop'; ]]]
            tap_action:
              action: navigate
              navigation_path: >
                [[[ return variables.view === variables.path
                    ? '/ui-develop/force_switches' : '/ui-develop/develop'; ]]]
            styles:
              icon:
                - color: >
                    [[[ return variables.view === variables.path
                            ? states['sensor.developer_icon_color'].state
                        : 'var(--secondary-text-color)'; ]]]

          user:
            type: custom:button-card
            template: button_shortcut_menu
            variables:
              path: help
            tooltip: Help
            icon: mdi:help
            tap_action:
              action: navigate
              navigation_path: /ui-overview/help

      - type: custom:button-card
        template: button_shortcut_menu
        tooltip: Forward
        icon: mdi:arrow-right
        show_name: false
        tap_action:
          action: toggle
        entity: input_boolean.forward_button
        variables:
          next: |
            [[[
             if (entity.state === 'on') {history.forward() ;}
            ]]]

  - type: custom:button-card
    template: vertical-filler

context sensitive icons and background, colored based on several states
template: button_shortcut_menu can be found in the templates gist

need these for the back/forward buttons to work:

##########################################################################################
# Package backend tools for Lovelace Frontend
##########################################################################################

##########################################################################################
# Inputs
##########################################################################################

#input_boolean:
#
#  back_button:
#    name: Back button
#
#  forward_button:
#    name: Forward button

##########################################################################################
# Automation
##########################################################################################

#automation:

# needed for Javascript in buttons shortcut menu
#  - alias: Back button
#    id: Back button
#    mode: single
#    trigger:
#      platform: state
#      entity_id: input_boolean.back_button
#      to: 'on'
#    action:
#      service: input_boolean.turn_off
#      target:
#        entity_id: input_boolean.back_button
#
#  - alias: Forward button
#    id: Forward button
#    mode: single
#    trigger:
#      platform: state
#      entity_id: input_boolean.forward_button
#      to: 'on'
#    action:
#      service: input_boolean.turn_off
#      target:
#        entity_id: input_boolean.forward_button