Circle Menu Card
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)
- Go to HACS page on your Home Assistant instance
- 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
- Select
Frontend - Press add icon and search for
Circle Menu Card - Select Circle Menu Card repo and install
- Force refresh the Home Assistant page (Ctrl + F5 / (Shift +) ⌘ + R)
- Add circle-menu-card to your page
Manual
- Download the ‘circle-menu-card.js’ from the latest [release][release-url] (with right click, save link as)
- Place the downloaded file on your Home Assistant machine in the
config/wwwfolder (when there is nowwwfolder in the folder where yourconfiguration.yamlfile is, create it and place the file there) - In Home Assistant go to
Configuration->Lovelace Dashboards->Resources(When there is noresourcestag on theLovelace Dashboardpage, enable advanced mode in your account settings, and retry this step) - Add a new resource
- Url =
/local/circle-menu-card.js - Resource type =
module
- Url =
- Force refresh the Home Assistant page (Ctrl + F5 / (Shift +) ⌘ + R)
- 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:
- Clicking the floating button toggles the visibility of the circular menu.
- 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.