Migrate ha-button-menu and ha-md-menu to ha-dropdown in config panel

[Copilot]

Breaking change

Proposed change

Migrates all overflow menus in src/panels/config/ from legacy ha-button-menu/ha-md-button-menu and ha-md-menu components to the new ha-dropdown component, following the pattern established in PR #28293.

Files Migrated:

• areas/ha-config-area-page.ts
• areas/ha-config-areas-dashboard.ts
• dashboard/ha-config-dashboard.ts
• cloud/cloud-login-panel.ts
• cloud/cloud-account.ts
• network/supervisor-network.ts
• scene/ha-scene-editor.ts
• scene/ha-scene-dashboard.ts
• core/ha-config-section-updates.ts
• automation/ha-automation-picker.ts (including row-level overflow menus)
• devices/ha-config-devices-dashboard.ts
• entities/ha-config-entities.ts
• helpers/ha-config-helpers.ts
• script/ha-script-picker.ts

Migration Pattern Applied:

• Replace <ha-button-menu> / <ha-md-button-menu> / <ha-md-menu> with <ha-dropdown>
• Replace <ha-list-item> (inside menus) / <ha-md-menu-item> with <ha-dropdown-item>
• Change @action to @wa-select event handlers
• Replace .clickAction on ha-dropdown-item with value attributes and @wa-select handlers on parent
• Update index-based switch statements to use ev.detail.item.value
• Replace slot="graphic" / slot="start" with slot="icon"
• Replace class="warning" with variant="danger"
• Replace <ha-md-divider> and <li divider> with <wa-divider>
• Replace <ha-sub-menu> with native Web Awesome submenu pattern using slot="submenu" on child ha-dropdown-item elements
• Use reusable render methods (e.g., _renderLabelItems(submenu), _renderAreaItems(submenu)) with conditional slot assignment (.slot=${submenu ? "submenu" : ""}) for cleaner submenu implementations
• Use data-* HTML attributes for custom data (e.g., data-area-id, data-action) following web standards
• Use semantic values (e.g., "select-area") instead of IDs as value attributes for clarity
• Remove invalid attributes like has-overflow and keep-open that don't exist in Web Awesome dropdown API
• Use type="checkbox" on ha-dropdown-item for toggleable menu items in picker pages (automation, script, scene), while keeping @click handlers with embedded ha-checkbox elements for label/area bulk selection menus (following automation picker pattern)
• Move styling classes from ha-dropdown to trigger element (e.g., ha-button) where appropriate
• Remove unused imports (ha-md-menu, HaMdMenu, ha-md-menu-item, HaMdMenuItem, ha-md-divider, ha-sub-menu, ha-check-list-item) after migration
• Add proper type imports for HaDropdownItem
• Replace programmatic menu opening patterns with inline ha-dropdown components (e.g., row-level overflow menus)
• Add proper null safety checks for method parameters
• Remove obsolete handler methods that are no longer used after migration

Type of change

• [ ] Dependency upgrade
• [ ] Bugfix (non-breaking change which fixes an issue)
• [ ] New feature (thank you!)
• [ ] Breaking change (fix/feature causing existing functionality to break)
• [x] Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR is related to issue or discussion: PR #28293
• Link to documentation pull request:

Checklist

• [x] The code change is tested and works locally.
• [x] There is no commented out code in this PR.
• [ ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [ ] Documentation added/updated for www.home-assistant.io

Original prompt

Objective

Migrate all overflow menus in src/panels/config/ from legacy ha-button-menu/ha-md-button-menu components to the new ha-dropdown component, following the pattern established in PR #28293.

Except src/panels/config/logs/ha-config-logs.ts that is already migrated in another PR. Files to Migrate

Search for and migrate ALL files in src/panels/config/ that contain either:

ha-button-menu (with ha-list-item) ha-md-button-menu (with ha-md-menu-item)

ha-dropdown-item API Reference

Based on the webawesome source code, ha-dropdown-item has the following: Available Slots

Slot

Description

(default)

The dropdown item's label

icon

An optional icon to display before the label

details

Additional content to display after the label

submenu

Submenu items for nested menus Available Properties

Property

Type

Description

value

string

Value for identifying the item in wa-select event

type

'normal' | 'checkbox'

Set to 'checkbox' for checkable items

checked

boolean

Whether checkbox is checked (only when type="checkbox")

disabled

boolean

Disables the item

variant

'default' | 'danger'

Visual variant for danger/warning items CSS Parts

Part

Description

checkmark

The checkmark icon for checkbox items

icon

Container for icon slot

label

Container for label slot

details

Container for details slot

submenu-icon

Submenu indicator icon

submenu

Submenu container

Migration Rules

1. Import Changes 1.1 Removing Old Imports

CRITICAL: Before removing ANY import, search the ENTIRE file to verify it is ONLY used for the overflow menu being migrated.

Step-by-step verification process:

For ha-button-menu import:

Search file for all <ha-button-menu occurrences Count total usages If ALL are being migrated → remove import If ANY remain → keep import For ha-list-item import:

Search file for ALL <ha-list-item occurrences Check EACH usage location:

Inside ? → Will be migrated Inside ? → NOT migrated, keep import Standalone list usage? → NOT migrated, keep import Only remove import if ALL usages are within menus being migrated For ha-md-button-menu import:

Same process as ha-button-menu

For ha-md-menu-item import:

Same process as ha-list-item For ha-md-divider import:

Check if used outside of menus Only remove if ALL usages are within menus being migrated 1.2 Adding New Imports

Import paths are RELATIVE to the current file location. Calculate the correct path!

Path calculation method:

Count directories from file location to src/ Add components/ to reach the components folder

File Location

Levels Up

Import Path Prefix

src/panels/config/logs/*. ts

3

../../../components/

src/panels/config/backup/*.ts

3

../../../components/

src/panels/config/areas/*.ts

3

../../../components/

src/panels/config/cloud/login/*.ts

4

../../../../components/

src/panels/config/cloud/account/*.ts

4

../../../../components/

src/panels/config/automation/trigger/*.ts

4

../../../../components/

src/panels/config/automation/trigger/types/*.ts

5

../../../../../components/

src/panels/config/automation/condition/*.ts

4

../../../../components/

src/panels/config/integrations/*.ts

3

../../../components/

src/panels/config/integrations/integration-panels/thread/*.ts

5

../../../../../components/

Required new imports (adjust path based on file location):

TypeScript import "../../../components/ha-dropdown"; import "../../../components/ha-dropdown-item"; import type { HaDropdownItem } from "../../../components/ha-dropdown-item";

For wa-divider (only if dividers are used):

TypeScript import "@home-assistant/webawesome/dist/components/divider/divider";

Note: This is an absolute package import, NOT a relative path.

2. Component Replacements

Old Component

New Component

(inside menu only)

3. Attribute/Property Migrations 3.1 On the dropdown container (ha-dropdown)

Old Attribute

Action

Notes

positioning="fixed"

Remove

Not needed

positioning="popover"

Replace with placement="bottom-end"

Or appropriate placement

anchor-corner="..."

Replace with placement="bottom-end"

Simplify

menu-corner="..."

Replace with placement="bottom-end"

Simplify

fixed

Remove

Not needed

multi

Remove

Use type="checkbox" on items instead

@action=${handler}

Replace with @wa-select=${handler}

Update handler logic

@opened=${handler}

Replace with @wa-show=${handler}

See section 5.6

@closed=${handler}

Replace with @wa-hide=${handler}

See section 5.6 3.2 On menu items (ha-dropdown-item)

Old Attribute

New Attribute

Notes

slot="graphic"

slot="icon"

Icon slot renamed

slot="start"

...

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[wendevlin]

@copilot You solved the submenu change in several files wrong. Do it like I did it in ha-automation-picker

[Copilot]

@copilot You solved the submenu change in several files wrong. Do it like I did it in ha-automation-picker

Fixed in the latest commits. All files now use the same submenu pattern as ha-automation-picker:

• Created render methods _renderLabelItems(submenu) and _renderAreaItems(submenu)
• Use conditional slot assignment: .slot=${submenu ? "submenu" : ""}
• Maintained @click and ha-checkbox for label items (same as automation picker)
• Simplified templates by replacing inline logic with clean render method calls