{"id":21462044,"url":"https://github.com/bhuebschen/circle-menu-card","last_synced_at":"2025-07-15T03:30:42.491Z","repository":{"id":240998117,"uuid":"804013431","full_name":"bhuebschen/circle-menu-card","owner":"bhuebschen","description":"Allows you to create a circular menu with actions or shortcuts that can be accessed via a floating button in the bottom corner.","archived":false,"fork":false,"pushed_at":"2025-03-19T06:41:28.000Z","size":78,"stargazers_count":12,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-04T16:26:26.524Z","etag":null,"topics":["circular-menu","floating-action-button","hacs-custom","hacs-integration","home-assistant","lovelace","lovelace-custom-card","lovelace-ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bhuebschen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-21T19:39:08.000Z","updated_at":"2025-06-26T02:04:52.000Z","dependencies_parsed_at":"2024-11-23T10:03:07.349Z","dependency_job_id":null,"html_url":"https://github.com/bhuebschen/circle-menu-card","commit_stats":null,"previous_names":["bhuebschen/circle-menu-card"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/bhuebschen/circle-menu-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Fcircle-menu-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Fcircle-menu-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Fcircle-menu-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Fcircle-menu-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhuebschen","download_url":"https://codeload.github.com/bhuebschen/circle-menu-card/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Fcircle-menu-card/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265397526,"owners_count":23758443,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["circular-menu","floating-action-button","hacs-custom","hacs-integration","home-assistant","lovelace","lovelace-custom-card","lovelace-ui"],"created_at":"2024-11-23T07:12:20.318Z","updated_at":"2025-07-15T03:30:42.257Z","avatar_url":"https://github.com/bhuebschen.png","language":"JavaScript","funding_links":["https://github.com/sponsors/bhuebschen"],"categories":[],"sub_categories":[],"readme":"# Circle Menu Card\n\n[![hacs][hacs-image]][hacs-url]\n[![GitHub Sponsors][gh-sponsors-image]][gh-sponsors-url]\n\n![preview]\n\nThe 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.\n\n### Features:\n- **Customization:** Configure the icons, colors, and positions of the floating button and menu items to match your dashboard's theme.\n- **Multiple Actions:** Each menu item can perform various actions, such as toggling lights, controlling media players, or navigating to specific dashboards.\n- **Responsive Design:** The circular menu adjusts its position based on the configuration, ensuring compatibility with different screen sizes and layouts.\n\n### Installation:\n\n### [HACS](hacs) (Home Assistant Community Store)\n\n1. Go to HACS page on your Home Assistant instance\n1. Add this repository (https://github.com/bhuebschen/circle-menu-card) via HACS Custom repositories [How to add Custom Repositories](https://hacs.xyz/docs/faq/custom_repositories/)\n1. Select `Frontend`\n1. Press add icon and search for `Circle Menu Card`\n1. Select Circle Menu Card repo and install\n1. Force refresh the Home Assistant page (\u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eF5\u003c/kbd\u003e / (\u003ckbd\u003eShift\u003c/kbd\u003e +) \u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eR\u003c/kbd\u003e)\n1. Add circle-menu-card to your page\n\n[![Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=bhuebschen\u0026repository=circle-menu-card\u0026category=plugin)\n\n### Manual\n\n1. Download the 'circle-menu-card.js' from the latest [release][release-url] (with right click, save link as)\n1. 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)\n1. In Home Assistant go to `Configuration-\u003eLovelace Dashboards-\u003eResources` (When there is no `resources` tag on the `Lovelace Dashboard` page, enable advanced mode in your account settings, and retry this step)\n1. Add a new resource\n   1. Url = `/local/circle-menu-card.js.js`\n   1. Resource type = `module`\n1. Force refresh the Home Assistant page (\u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eF5\u003c/kbd\u003e / (\u003ckbd\u003eShift\u003c/kbd\u003e +) \u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eR\u003c/kbd\u003e)\n1. Add circle-menu-card to your page\n\n### Configuration:\nHere's an example configuration for the Circle Menu Card:\n\n```yaml\ntype: 'custom:circle-menu-card'\nleft: false # Position the menu on the left\nicon: 'mdi:menu' # Floating button icon\nbutton_color: '#3498db' # Button background color\nicon_color: 'white' # Icon color\nmenu_background_color: '#3498db' # Menu background color\nitems:\n  - icon: mdi:lightbulb\n    alt: Lights on...\n    action:\n      action: call-service\n      service: light.turn_on\n      service_data:\n        entity_id: light.living_room\n  - icon: mdi:thermometer\n    alt: Default Dashboard\n    action:\n      action: navigate\n      navigation_path: /lovelace/0\n  - icon: mdi:music\n    alt: Music Control\n    action:\n      action: call-service\n      service: media_player.media_play_pause\n      service_data:\n        entity_id: media_player.living_room\n  - icon: mdi:fan\n    alt: Fan Control\n    action:\n      action: call-service\n      service: fan.turn_on\n      service_data:\n        entity_id: fan.living_room\n  # Up to 4 menu items...\n```\n### Options:\n\n| Name                   | Description                                                                                           | Default Value                |\n|------------------------|-------------------------------------------------------------------------------------------------------|------------------------------|\n| `left`                 | Whether to position the menu on the left side of the screen                                           | `false`                      |\n| `icon`                 | The icon to be displayed on the floating button                                                       | `'mdi:menu'`                 |\n| `button_color`         | Background color of the floating button                                                               | var(--primary-color)         |\n| `icon_color`           | Color of the icon on the floating button                                                              | var(--text-primary-color)    |\n| `menu_background_color`| Background color of the menu                                                                          | var(--primary-color)         |\n| `auto_close`           | Closes the menu after a timeout in milliseconds                                                       | ``                           |\n| `json_config`          | Load an external json-file with the menu and items configuration                                      | ``                           |\n| `item_active_color`    | When using call_service, this defines the background color of a menu item whose destination entity is 'positive'. | var(--accent-color)                           |\n| `positive_states`      | Defines an array of 'positive' states for entities to be highlighted. | 'true', 'on', 'open', 'active', 'detected', 'occupied', 'unlocked', 'home', 'above_horizon', 'ready' |\n| `json_config`          | Load an external json-file with the menu and items configuration                                      | ``                           |\n| `items`                | Array of menu items. Each item should contain `icon`, `alt`, and `action` properties.                 | `[]`                         |\n| `items[].icon`         | Icon for the menu item                                                                                | `''`                         |\n| `items[].alt`          | Alt text for the menu item                                                                            | `''`                         |\n| `items[].action`       | Action to be performed when the menu item is clicked. Can be either `'navigate'` or `'call-service'`. | `''`                         |\n| `items[].action.navigation_path` | Path to navigate to if `action` is `'navigate'`                                                   | `''`                         |\n| `items[].action.service`         | Service to call if `action` is `'call-service'`                                                   | `''`                         |\n| `items[].action.service_data`    | Service data to pass if `action` is `'call-service'`                                              | `{}`                         |\n\n### Usage:\n1. Clicking the floating button toggles the visibility of the circular menu.\n2. Each menu item performs a predefined action, such as controlling devices or navigating to other dashboards.\n\n### Global configuration:\nYou 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.\n\nAny additional parameters provided will override the parameters from the JSON configuration.\n\n### Credits:\n- The Circle Menu Card is inspired by various circular menu implementations and is built as a custom Lovelace card for Home Assistant.\n\n### Issues \u0026 Contributions:\nIf you encounter any issues or have suggestions for improvements, feel free to [open an issue](https://github.com/bhuebschen/circle-menu-card/issues) or submit a pull request.\n\n## License\n\nMIT © [Benedikt Hübschen][bhuebschen]\n\n\u003c!-- Badges --\u003e\n\n[hacs-url]: https://github.com/hacs/integration\n[hacs-image]: https://img.shields.io/badge/hacs-custom-orange.svg?style=flat-square\n[gh-sponsors-url]: https://github.com/sponsors/bhuebschen\n[gh-sponsors-image]: https://img.shields.io/github/sponsors/bhuebschen?style=flat-square\n\n\u003c!-- References --\u003e\n\n[preview]: https://github.com/bhuebschen/circle-menu-card/assets/1864448/39352877-43fa-49ce-a517-079e3783a95d\n[home-assistant]: https://www.home-assistant.io/\n[hacs]: https://hacs.xyz\n[latest-release]: https://github.com/bhuebschen/circle-menu-card/releases/latest\n[ha-scripts]: https://www.home-assistant.io/docs/scripts/\n[edit-readme]: https://github.com/bhuebschen/circle-menu-card/edit/master/README.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhuebschen%2Fcircle-menu-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhuebschen%2Fcircle-menu-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhuebschen%2Fcircle-menu-card/lists"}