Circular Menu - Lovelace

Circle Menu Card

preview

The Circle Menu Card is a custom Lovelace card for Home Assistant that allows you to create a circular menu of actions or shortcuts. This card provides a visually appealing way to access common actions or navigate to different parts of your Home Assistant dashboard.

Features:

  • Customization: Configure the icons, colors, and positions of the floating button and menu items to match your dashboard’s theme.
  • Multiple Actions: Each menu item can perform various actions, such as toggling lights, controlling media players, or navigating to specific dashboards.
  • Responsive Design: The circular menu adjusts its position based on the configuration, ensuring compatibility with different screen sizes and layouts.

Installation:

HACS (Home Assistant Community Store)

  1. Go to HACS page on your Home Assistant instance
  2. Add this repository (GitHub - bhuebschen/circle-menu-card: Allows you to create a circular menu with actions or shortcuts that can be accessed via a floating button in the bottom corner.) via HACS Custom repositories How to add Custom Repositories
  3. Select Frontend
  4. Press add icon and search for Circle Menu Card
  5. Select Circle Menu Card repo and install
  6. Force refresh the Home Assistant page (Ctrl + F5 / (Shift +) + R)
  7. Add circle-menu-card to your page

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

Manual

  1. Download the ‘circle-menu-card.js’ from the latest [release][release-url] (with right click, save link as)
  2. Place the downloaded file on your Home Assistant machine in the config/www folder (when there is no www folder in the folder where your configuration.yaml file is, create it and place the file there)
  3. In Home Assistant go to Configuration->Lovelace Dashboards->Resources (When there is no resources tag on the Lovelace Dashboard page, enable advanced mode in your account settings, and retry this step)
  4. Add a new resource
    1. Url = /local/circle-menu-card.js
    2. Resource type = module
  5. Force refresh the Home Assistant page (Ctrl + F5 / (Shift +) + R)
  6. Add circle-menu-card to your page

Configuration:

Here’s an example configuration for the Circle Menu Card:

type: 'custom:circle-menu-card'
left: true # Position the menu on the left
icon: 'mdi:menu' # Floating button icon
button_color: '#3498db' # Button background color
icon_color: 'white' # Icon color
menu_background_color: '#3498db' # Menu background color
items:
  - icon: mdi:lightbulb
    alt: Lights on...
    action:
      action: call-service
      service: light.turn_on
      service_data:
        entity_id: light.living_room
  - icon: mdi:thermometer
    alt: Default Dashboard
    action:
      action: navigate
      navigation_path: /lovelace/0
  - icon: mdi:music
    alt: Music Control
    action:
      action: call-service
      service: media_player.media_play_pause
      service_data:
        entity_id: media_player.living_room
  - icon: mdi:fan
    alt: Fan Control
    action:
      action: call-service
      service: fan.turn_on
      service_data:
        entity_id: fan.living_room
  # Up to 4 menu items...

Options:

Name Description Default Value
left Whether to position the menu on the left side of the screen false
icon The icon to be displayed on the floating button 'mdi:menu'
button_color Background color of the floating button var(–primary-color)
icon_color Color of the icon on the floating button var(–text-primary-color)
menu_background_color Background color of the menu var(–primary-color)
auto_close Closes the menu after a timeout in milliseconds ``
json_config Load an external json-file with the menu and items configuration ``
item_active_color When using call_service, this defines the background color of a menu item whose destination entity is ‘positive’. var(–accent-color)
positive_states Defines an array of ‘positive’ states for entities to be highlighted. ‘true’, ‘on’, ‘open’, ‘active’, ‘detected’, ‘occupied’, ‘unlocked’, ‘home’, ‘above_horizon’, ‘ready’
json_config Load an external json-file with the menu and items configuration ``
items Array of menu items. Each item should contain icon, alt, and action properties. []
items[].icon Icon for the menu item ''
items[].alt Alt text for the menu item ''
items[].action Action to be performed when the menu item is clicked. Can be either 'navigate' or 'call-service'. ''
items[].action.navigation_path Path to navigate to if action is 'navigate' ''
items[].action.service Service to call if action is 'call-service' ''
items[].action.service_data Service data to pass if action is 'call-service' {}

Usage:

  1. Clicking the floating button toggles the visibility of the circular menu.
  2. Each menu item performs a predefined action, such as controlling devices or navigating to other dashboards.

Global configuration:

You can store the configuration in a JSON file to provide a global setup for all menus. Use json_config to load the configuration into the circle-menu-card instance.

11 Likes

Seems nice.

The configuration i believe will need to be placed in the Raw Configuration Editor under each view right?

Thanks

Oh, wow, this is truly amazing!

Hi Michail,

you can find the card now in the card-list … and an small sample is also provided when adding it to a dashboard.

You can add the card everywhere, because it does not require any space

Great, i just updated and i confirm i can find it! It also works flawlesly!

1.0.2

  • Menu item positions are now calculated.
  • Clicking outside the menu now closes it.
  • The floating button now displays an “x” to indicate the close behavior upon clicking.
  • Default colors now follow the theme-based colors.
  • Added the “auto-close on timeout” feature (thanks to @ngocjohn).
1 Like

1.0.3

  • Menu items can show the state of an entity
  • ‘positive’ entities can have a custom color
  • Configuration can be stored in /www and loaded with ‘json_config’.
  • ‘Visual Editor’ shows JSON-Configuration.
  • ‘positive States’ can be customized