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.
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/www folder (when there is no www folder in the folder where your configuration.yaml file is, create it and place the file there)
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)
Add a new resource
Url = /local/circle-menu-card.js
Resource type = module
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.
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.
I am struggling with the global config via JSON file.
I have created „circularmenu.json“ in /www and added „json_config: circularmenu.json“ in the card config (removing everything else) but nothing does show up.
Can somebody post an example so that I can compare what I do wrong!?
Thanks!
you still need to add the element to your dashboards/subdashboards… but you dont have to provide the whole configuration to every instance, you can save the config to a json file and provide it via json_config
Hi there, I have been looking for FAB related posts because I’m trying to merge the design benefits of a FAB with a sticky bottom navigation bar. This card that you designed is the closest and cleanest implementation of anything close to what I’m thinking.
I have followed the youtube channel My Smart Homes tutorial for a sticky navigation menu and played with it a bit but I still don’t think its smooth enough. What I was trying to do was get the FAB to fade/morph/change/expand into the sticky navigation bar and if I wanted to collapse it back just click the far right button.
Is there anything you might change or tweak to make it function more closely to what you’ve done here but still be a nav bar for mobile devices? I’m getting to the desperate stage of my trying things.
I am very novice at CSS and I have you fab card already added. I guess what I was looking for was if you could refactor your animated circle one to be a better version of what I’m trying to do since your approach is obviously way cleaner since you wrote JS to do the heavy lifting and I hacked mine together with janky CSS. Here’s a video of it in action.
I am a full time dad and get VERY little nerd time anymore, and even less time where its optimal for brain work, so if you can work on this, and I can maybe beta test it with you or give you feedback so I can integrate this directly into my project, I would be SUPER grateful. Thank you for being receptive at the least and good luck with the move!
