🗃️ Material Menu Card

🌟 Overview

The material-menu-card allows you to create fully customizable menu items with actions such as navigation, URL opening, call-service, and more.

🔧 Requirements

To use this card, the following custom components are required:

📌 Card Mod

🔗 Card Mod

GitHubgithub.com

📌 Button Card

🔗 Button Card

GitHubgithub.com

TIP

💡 HACS installation is recommended to keep components up to date.

---

🛠️ Configuration

Name	Type	Description	Default	Required
type	string	custom:material-menu-card	Required	✅ Yes
name	string	The name/title to display on the card. 📛		✅ Yes
label	string	The subtitle to display below the name. 📝		❌ No
icon	string	A custom icon to display on the card. ✨		✅ Yes
tap_action	object	Action to perform on tap. 👇 See Actions for more information.	none	✅ Yes
hold_action	object	Action to perform on hold. HOLD See Actions for more information.	none	❌ No
double_tap_action	object	Action to perform on double tap. ✌️ See Actions for more information.	none	❌ No

---

🚀 Actions

The card supports the standard Home Assistant actions for tap_action, hold_action, and double_tap_action. Here are the most common ones:

• navigate 🗺️: Navigates to a specific path in Home Assistant.
  • navigation_path: The path to navigate to (e.g., /lovelace/lights).
• url 🌐: Opens a URL.
  • url_path: The URL to open.
• toggle 🔄: Toggles the state of an entity (e.g., a switch or a light).
• call-service 📞: Calls a Home Assistant service.
  • service: The service to call (e.g., light.turn_on).
  • data or target: The data or target for the service.
• more-info ℹ️: Shows the more-info dialog for an entity.
• none 🚫: No action.

---

📜 Example

type: custom:material-menu-card
name: Activity
icon: mdi:history
label: Info on the latest actions performed
tap_action:
  action: navigate
  navigation_path: activity
hold_action:
  action: call-service
  service: light.toggle
  target:
    entity_id: light.living_room
double_tap_action:
  action: url
  url_path: https://www.google.com

---

🎨 Extended Customization

⚠️ LICENSE

Only for PRO and ULTIMATE users, get your licence now 🚀.

🚀 Pro & Ultimate Features

The Paid (PRO/ULTIMATE) version of material-menu-card has been completely rewritten from scratch in pure LitElement and Material 3 Expressive design system. It eliminates the dependency on button-card and card-mod, providing superior rendering performance, touch-first responsive micro-interactions (pression-click and dynamic ripple), advanced geometry/border radius controls, background styling, customizable icon containers, and template engine evaluation for colors and texts.

---

🛠️ Configuration Options

Option	Type	Description	Default	Required
type	string	custom:material-menu-card	Required	✅ Yes
entity	string	Optional Home Assistant entity ID. Replaces the navigation chevron with the entity's control/state (e.g. interactive dropdown for input_select/select, switch for input_boolean/switch, or formatted state badge).	-	❌ No
name	string	The name/title to display on the card. 📛 (Supports templates, falls back to entity)	-	❌ No
label	string	The subtitle to display below the name. 📝 (Traditional label, supports templates)	-	❌ No
icon	string	A custom icon to display on the card. ✨ (Supports templates, falls back to entity)	-	❌ No
show_full_label	boolean	Disable text truncation to display the entire subtitle text.	false	❌ No
show_entity_state	boolean	Controls whether to display the entity's interactive state/control on the right. When disabled, falls back to navigation arrow.	true	❌ No
show_shavron_icon	boolean	Displays a trailing navigation chevron arrow when no entity is configured or entity state is disabled.	true	❌ No
extended_card	boolean	Extends card width to fill container with negative horizontal margins (-10px).	false	❌ No
background_color_type	string	Background color mode: transparent, palette, custom.	transparent	❌ No
container_border	string	Corner shape of the card container: circle, rounded-square, square.	circle	❌ No
background_color	string	Custom background color when background_color_type is custom. (Supports templates)	-	❌ No
show_icon_container	boolean	Displays a tonal container box around the icon.	true	❌ No
icon_container_type	string	Shape of icon container: circle, rounded-square, square.	circle	❌ No
icon_container_color	string	Background color of the icon container. (Supports templates)	-	❌ No
icon_color	string	Custom icon color. (Supports templates)	-	❌ No
text_color	string	Custom text color for title and subtitle. (Supports templates)	-	❌ No
tap_action	object	Action to perform on tap. 👇 See Actions for more information.	none	❌ No
hold_action	object	Action to perform on hold. HOLD See Actions for more information.	none	❌ No
double_tap_action	object	Action to perform on double tap. ✌️ See Actions for more information.	none	❌ No

---

🎨 Styling & Layout Customization

Background Modes (background_color_type)

• transparent (default): The card blends seamlessly with parent containers, keeping clean borders with a gentle hover feedback.
• palette: Uses standard Material 3 tonal surface container colors (--md-sys-color-surface-container) with subtle elevation shadow.
• custom: Allows specifying any custom color (background_color), including hex, rgba, CSS variables, or template expressions.

Card Border Shapes (container_border)

(Available when background_color_type is palette or custom)

• circle (default): Fully rounded pill shape (30px radius).
• rounded-square: Expressive rounded rectangle (16px radius).
• square: Clean square corners (0px radius).

Icon Container Customization

• show_icon_container: Toggle the background container around the icon.
• icon_container_type: circle, rounded-square, or square.
• icon_container_color: Custom background color for the icon box (supports templates).
• icon_color: Custom color for the icon itself.

Extended Layout (extended_card)

When enabled, applies negative horizontal margins (-10px), allowing the card to stretch to the container boundaries, ideal for vertical stacks or compact grids.

---

🚀 Actions

The card supports standard Home Assistant actions for tap_action, hold_action, and double_tap_action:

• navigate 🗺️: Navigates to a specific path in Home Assistant (e.g. /lovelace/lights).
• url 🌐: Opens an external URL.
• toggle 🔄: Toggles the state of an entity.
• call-service 📞: Calls a Home Assistant service with service data.
• more-info ℹ️: Shows the entity's more-info dialog.
• none 🚫: No action.

---

📜 Examples

Basic Example

type: custom:material-menu-card
name: Activity
icon: mdi:history
label: Info on the latest actions performed
tap_action:
  action: navigate
  navigation_path: activity
hold_action:
  action: call-service
  service: light.toggle
  target:
    entity_id: light.living_room
double_tap_action:
  action: url
  url_path: https://www.google.com

Advanced Styled Example

type: custom:material-menu-card
name: Living Room Climate
label: Automatic temperature schedule active
icon: mdi:thermostat
show_full_label: true
show_shavron_icon: true
extended_card: false
background_color_type: palette
container_border: rounded-square
show_icon_container: true
icon_container_type: circle
icon_color: var(--md-sys-color-primary)
icon_container_color: var(--md-sys-color-primary-container)
text_color: var(--md-sys-color-on-surface)
tap_action:
  action: navigate
  navigation_path: /lovelace/climate

Selector Entity Example (Material 3 Dropdown)

type: custom:material-menu-card
entity: input_select.house_mode
name: House Mode
label: Switch system operating mode
icon: mdi:home-clock
background_color_type: palette
container_border: circle

Switch Entity Example (Material 3 Expressive Switch)

type: custom:material-menu-card
entity: input_boolean.guest_mode
name: Guest Mode
label: Allow visitors access to devices
background_color_type: palette
container_border: rounded-square

---

🎨 Extended Customization

⚠️ LICENSE

Only for PRO and ULTIMATE users, get your licence now 🚀.

This card has its own version of Card-Mod. You can inject custom CSS to override any style or create unique animations.

💡 ADVANCED STYLING

👉 Check out the Styling Guide.