Migrate button-menu to ha-dropdown in 9 files (#29089)

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-15 07:25:54 +00:00 · 2026-01-20 15:20:29 +01:00
parent 1654a67d30
commit 681b60614f
9 changed files with 223 additions and 206 deletions
--- a/src/panels/config/cloud/account/cloud-account.ts
+++ b/src/panels/config/cloud/account/cloud-account.ts
@@ -6,9 +6,12 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
-import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-dropdown";
+import "../../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-list-item";
+import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-tip";
 import type {
  CloudStatusLoggedIn,
@@ -53,26 +56,26 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
        .narrow=${this.narrow}
        header="Home Assistant Cloud"
      >
-        <ha-button-menu slot="toolbar-icon" @action=${this._handleMenuAction}>
+        <ha-dropdown slot="toolbar-icon" @wa-select=${this._handleMenuAction}>
          <ha-icon-button
            slot="trigger"
            .label=${this.hass.localize("ui.common.menu")}
            .path=${mdiDotsVertical}
          ></ha-icon-button>

-          <ha-list-item graphic="icon">
+          <ha-dropdown-item value="reset">
            ${this.hass.localize(
              "ui.panel.config.cloud.account.reset_cloud_data"
            )}
-            <ha-svg-icon slot="graphic" .path=${mdiDeleteForever}></ha-svg-icon>
-          </ha-list-item>
-          <ha-list-item graphic="icon">
+            <ha-svg-icon slot="icon" .path=${mdiDeleteForever}></ha-svg-icon>
+          </ha-dropdown-item>
+          <ha-dropdown-item value="download">
            ${this.hass.localize(
              "ui.panel.config.cloud.account.download_support_package"
            )}
-            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+            <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
+          </ha-dropdown-item>
+        </ha-dropdown>
        <div class="content">
          <ha-config-section .isWide=${this.isWide}>
            <span slot="header">Home Assistant Cloud</span>
@@ -297,13 +300,15 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
    fireEvent(this, "ha-refresh-cloud-status");
  }

-  private _handleMenuAction(ev) {
-    switch (ev.detail.index) {
-      case 0:
+  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+    const value = ev.detail.item.value;
+    switch (value) {
+      case "reset":
        this._deleteCloudData();
        break;
-      case 1:
+      case "download":
        this._downloadSupportPackage();
+        break;
    }
  }

--- a/src/panels/config/cloud/login/cloud-login-panel.ts
+++ b/src/panels/config/cloud/login/cloud-login-panel.ts
@@ -5,11 +5,14 @@ import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-dropdown";
+import "../../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-icon-next";
 import "../../../../components/ha-list";
 import "../../../../components/ha-list-item";
+import "../../../../components/ha-svg-icon";
 import { removeCloudData } from "../../../../data/cloud";
 import {
  showAlertDialog,
@@ -44,26 +47,26 @@ export class CloudLoginPanel extends LitElement {
        .narrow=${this.narrow}
        header="Home Assistant Cloud"
      >
-        <ha-button-menu slot="toolbar-icon" @action=${this._handleMenuAction}>
+        <ha-dropdown slot="toolbar-icon" @wa-select=${this._handleMenuAction}>
          <ha-icon-button
            slot="trigger"
            .label=${this.hass.localize("ui.common.menu")}
            .path=${mdiDotsVertical}
          ></ha-icon-button>

-          <ha-list-item graphic="icon">
+          <ha-dropdown-item value="reset">
            ${this.hass.localize(
              "ui.panel.config.cloud.account.reset_cloud_data"
            )}
-            <ha-svg-icon slot="graphic" .path=${mdiDeleteForever}></ha-svg-icon>
-          </ha-list-item>
-          <ha-list-item graphic="icon">
+            <ha-svg-icon slot="icon" .path=${mdiDeleteForever}></ha-svg-icon>
+          </ha-dropdown-item>
+          <ha-dropdown-item value="download">
            ${this.hass.localize(
              "ui.panel.config.cloud.account.download_support_package"
            )}
-            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+            <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
+          </ha-dropdown-item>
+        </ha-dropdown>
        <div class="content">
          <ha-config-section .isWide=${this.isWide}>
            <span slot="header">Home Assistant Cloud</span>
@@ -164,13 +167,15 @@ export class CloudLoginPanel extends LitElement {
    fireEvent(this, "flash-message-changed", { value: "" });
  }

-  private _handleMenuAction(ev) {
-    switch (ev.detail.index) {
-      case 0:
+  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+    const value = ev.detail.item.value;
+    switch (value) {
+      case "reset":
        this._deleteCloudData();
        break;
-      case 1:
+      case "download":
        this._downloadSupportPackage();
+        break;
    }
  }

--- a/src/panels/config/storage/ha-config-section-storage.ts
+++ b/src/panels/config/storage/ha-config-section-storage.ts
@@ -14,7 +14,6 @@ import { navigate } from "../../../common/navigate";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-list";
--- a/src/panels/config/voice-assistants/assist-pref.ts
+++ b/src/panels/config/voice-assistants/assist-pref.ts
@@ -1,3 +1,4 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
  mdiBug,
  mdiCommentProcessingOutline,
@@ -18,14 +19,17 @@ import { formatLanguageCode } from "../../../common/language/format_language";
 import { navigate } from "../../../common/navigate";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list";
 import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
+import "../../../components/voice-assistant-brand-icon";
 import type { AssistPipeline } from "../../../data/assist_pipeline";
 import {
  createAssistPipeline,
@@ -48,7 +52,6 @@ import { showVoiceCommandDialog } from "../../../dialogs/voice-command-dialog/sh
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showVoiceAssistantPipelineDetailDialog } from "./show-dialog-voice-assistant-pipeline-detail";
-import "../../../components/voice-assistant-brand-icon";

@customElement("assist-pref")
 export class AssistPref extends LitElement {
@@ -144,7 +147,12 @@ export class AssistPref extends LitElement {
                <span slot="secondary">
                  ${formatLanguageCode(pipeline.language, this.hass.locale)}
                </span>
-                <ha-button-menu fixed slot="meta" @click=${stopPropagation}>
+                <ha-dropdown
+                  slot="meta"
+                  placement="bottom-end"
+                  @click=${stopPropagation}
+                  @wa-select=${this._handlePipelineMenuAction}
+                >
                  <ha-icon-button
                    slot="trigger"
                    .label=${this.hass!.localize(
@@ -152,64 +160,48 @@ export class AssistPref extends LitElement {
                    )}
                    .path=${mdiDotsVertical}
                  ></ha-icon-button>
-                  <ha-list-item
-                    graphic="icon"
-                    .id=${pipeline.id}
-                    @request-selected=${this._talkWithPipeline}
-                  >
+                  <ha-dropdown-item value="talk" .data=${pipeline.id}>
                    ${this.hass!.localize(
                      "ui.panel.config.voice_assistants.assistants.pipeline.start_conversation"
                    )}
                    <ha-svg-icon
-                      slot="graphic"
+                      slot="icon"
                      .path=${mdiCommentProcessingOutline}
                    ></ha-svg-icon>
-                  </ha-list-item>
-                  <ha-list-item
-                    graphic="icon"
+                  </ha-dropdown-item>
+                  <ha-dropdown-item
+                    value="set-preferred"
+                    .data=${pipeline.id}
                    .disabled=${this._preferred === pipeline.id}
-                    .id=${pipeline.id}
-                    @request-selected=${this._setPreferredPipeline}
                  >
                    ${this.hass.localize(
                      "ui.panel.config.voice_assistants.assistants.pipeline.detail.set_as_preferred"
                    )}
-                    <ha-svg-icon slot="graphic" .path=${mdiStar}></ha-svg-icon>
-                  </ha-list-item>
-                  <ha-list-item
-                    graphic="icon"
-                    .id=${pipeline.id}
-                    @request-selected=${this._debugPipeline}
-                  >
+                    <ha-svg-icon slot="icon" .path=${mdiStar}></ha-svg-icon>
+                  </ha-dropdown-item>
+                  <ha-dropdown-item value="debug" .data=${pipeline.id}>
                    ${this.hass.localize(
                      "ui.panel.config.voice_assistants.assistants.pipeline.detail.debug"
                    )}
-                    <ha-svg-icon slot="graphic" .path=${mdiBug}></ha-svg-icon>
-                  </ha-list-item>
-                  <ha-list-item
-                    graphic="icon"
-                    .id=${pipeline.id}
-                    @request-selected=${this._duplicatePipeline}
-                  >
+                    <ha-svg-icon slot="icon" .path=${mdiBug}></ha-svg-icon>
+                  </ha-dropdown-item>
+                  <ha-dropdown-item value="duplicate" .data=${pipeline.id}>
                    ${this.hass.localize("ui.common.duplicate")}
                    <ha-svg-icon
-                      slot="graphic"
+                      slot="icon"
                      .path=${mdiContentDuplicate}
                    ></ha-svg-icon>
-                  </ha-list-item>
-                  <ha-list-item
-                    class="danger"
-                    graphic="icon"
-                    .id=${pipeline.id}
-                    @request-selected=${this._deletePipeline}
+                  </ha-dropdown-item>
+                  <wa-divider></wa-divider>
+                  <ha-dropdown-item
+                    variant="danger"
+                    value="delete"
+                    .data=${pipeline.id}
                  >
                    ${this.hass.localize("ui.common.delete")}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${mdiTrashCan}
-                    ></ha-svg-icon>
-                  </ha-list-item>
-                </ha-button-menu>
+                    <ha-svg-icon slot="icon" .path=${mdiTrashCan}></ha-svg-icon>
+                  </ha-dropdown-item>
+                </ha-dropdown>
              </ha-list-item>
            `
          )}
@@ -286,24 +278,42 @@ export class AssistPref extends LitElement {
    }
  }

-  private _talkWithPipeline(ev) {
-    const id = ev.currentTarget.id as string;
+  private _handlePipelineMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+    const value = ev.detail.item.value;
+    const id = (ev.detail.item as any).data as string;
+    switch (value) {
+      case "talk":
+        this._talkWithPipeline(id);
+        break;
+      case "set-preferred":
+        this._setPreferredPipeline(id);
+        break;
+      case "debug":
+        this._debugPipeline(id);
+        break;
+      case "duplicate":
+        this._duplicatePipeline(id);
+        break;
+      case "delete":
+        this._deletePipeline(id);
+        break;
+    }
+  }
+
+  private _talkWithPipeline(id: string) {
    showVoiceCommandDialog(this, this.hass, { pipeline_id: id });
  }

-  private async _setPreferredPipeline(ev) {
-    const id = ev.currentTarget.id as string;
+  private async _setPreferredPipeline(id: string) {
    await setAssistPipelinePreferred(this.hass!, id);
    this._preferred = id;
  }

-  private async _debugPipeline(ev) {
-    const id = ev.currentTarget.id as string;
+  private async _debugPipeline(id: string) {
    navigate(`/config/voice-assistants/debug/${id}`);
  }

-  private async _duplicatePipeline(ev: Event) {
-    const id = (ev.currentTarget as HTMLElement).id as string;
+  private async _duplicatePipeline(id: string) {
    const pipeline = this._pipelines.find((res) => res.id === id);
    if (!pipeline) {
      showAlertDialog(this, {
@@ -326,8 +336,7 @@ export class AssistPref extends LitElement {
    this._openDialog(newPipeline);
  }

-  private async _deletePipeline(ev) {
-    const id = ev.currentTarget.id as string;
+  private async _deletePipeline(id: string) {
    if (this._preferred === id) {
      showAlertDialog(this, {
        text: this.hass!.localize(
@@ -426,16 +435,11 @@ export class AssistPref extends LitElement {
      --mdc-list-side-padding-left: 16px;
    }

-    ha-list-item.danger {
-      color: var(--error-color);
-      border-top: 1px solid var(--divider-color);
-    }
-
    ha-button-menu a {
      text-decoration: none;
    }

-    ha-svg-icon {
+    ha-list-item span ha-svg-icon {
      color: currentColor;
      width: 16px;
    }
@@ -460,6 +464,12 @@ export class AssistPref extends LitElement {
      margin-inline-end: 16px;
      margin-inline-start: initial;
    }
+
+    ha-dropdown {
+      font-size: var(--ha-font-size-m);
+      font-family: var(--ha-font-family-body);
+      letter-spacing: normal;
+    }
  `;
 }

--- a/src/panels/lovelace/components/hui-badge-edit-mode.ts
+++ b/src/panels/lovelace/components/hui-badge-edit-mode.ts
@@ -1,4 +1,4 @@
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
  mdiContentCopy,
  mdiContentCut,
@@ -14,9 +14,10 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-button-menu";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import { ensureBadgeConfig } from "../../../data/lovelace/config/badge";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@@ -120,48 +121,46 @@ export class HuiBadgeEditMode extends LitElement {
          <div class="edit-overlay"></div>
          <ha-svg-icon class="edit" .path=${mdiPencil}> </ha-svg-icon>
        </div>
-        <ha-button-menu
+        <ha-dropdown
          class="more"
-          corner="BOTTOM_END"
-          menu-corner="END"
-          .path=${[this.path!]}
-          @action=${this._handleAction}
+          placement="bottom-end"
+          @wa-select=${this._handleAction}
          @opened=${this._handleOpened}
          @closed=${this._handleClosed}
        >
          <ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
          </ha-icon-button>
-          <ha-list-item graphic="icon">
-            <ha-svg-icon slot="graphic" .path=${mdiPencil}></ha-svg-icon>
+          <ha-dropdown-item value="edit">
+            <ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
            ${this.hass.localize("ui.panel.lovelace.editor.edit_card.edit")}
-          </ha-list-item>
-          <ha-list-item graphic="icon">
+          </ha-dropdown-item>
+          <ha-dropdown-item value="duplicate">
            <ha-svg-icon
-              slot="graphic"
+              slot="icon"
              .path=${mdiPlusCircleMultipleOutline}
            ></ha-svg-icon>
            ${this.hass.localize(
              "ui.panel.lovelace.editor.edit_card.duplicate"
            )}
-          </ha-list-item>
-          <ha-list-item graphic="icon">
-            <ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
+          </ha-dropdown-item>
+          <ha-dropdown-item value="copy">
+            <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
            ${this.hass.localize("ui.panel.lovelace.editor.edit_card.copy")}
-          </ha-list-item>
-          <ha-list-item graphic="icon">
-            <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
+          </ha-dropdown-item>
+          <ha-dropdown-item value="cut">
+            <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
            ${this.hass.localize("ui.panel.lovelace.editor.edit_card.cut")}
-          </ha-list-item>
-          <li divider role="separator"></li>
-          <ha-list-item graphic="icon" class="warning">
+          </ha-dropdown-item>
+          <wa-divider></wa-divider>
+          <ha-dropdown-item value="delete" class="warning">
            ${this.hass.localize("ui.panel.lovelace.editor.edit_card.delete")}
            <ha-svg-icon
              class="warning"
-              slot="graphic"
+              slot="icon"
              .path=${mdiDelete}
            ></ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+          </ha-dropdown-item>
+        </ha-dropdown>
      </div>
    `;
  }
@@ -186,21 +185,22 @@ export class HuiBadgeEditMode extends LitElement {
    this._editBadge();
  }

-  private _handleAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
+  private _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+    const value = ev.detail.item.value;
+    switch (value) {
+      case "edit":
        this._editBadge();
        break;
-      case 1:
+      case "duplicate":
        this._duplicateBadge();
        break;
-      case 2:
+      case "copy":
        this._copyBadge();
        break;
-      case 3:
+      case "cut":
        this._cutBadge();
        break;
-      case 4:
+      case "delete":
        this._deleteBadge();
        break;
    }
@@ -297,7 +297,7 @@ export class HuiBadgeEditMode extends LitElement {
          background: var(--secondary-background-color);
          --mdc-icon-size: 16px;
        }
-        .more {
+        .more ha-icon-button {
          position: absolute;
          right: -8px;
          top: -8px;
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -1,5 +1,4 @@
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical } from "@mdi/js";
+import { mdiCheck, mdiDotsVertical } from "@mdi/js";
 import {
  differenceInDays,
  differenceInMonths,
@@ -16,14 +15,16 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
 import {
  calcDate,
-  calcDateProperty,
  calcDateDifferenceProperty,
+  calcDateProperty,
  shiftDateRange,
 } from "../../../common/datetime/calc_date";
+import type { DateRange } from "../../../common/datetime/calc_date_range";
+import { calcDateRange } from "../../../common/datetime/calc_date_range";
 import { firstWeekdayIndex } from "../../../common/datetime/first_weekday";
 import {
  formatDate,
@@ -33,19 +34,19 @@ import {
  formatDateYear,
 } from "../../../common/datetime/format_date";
 import { debounce } from "../../../common/util/debounce";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-button";
-import "../../../components/ha-check-list-item";
 import "../../../components/ha-date-range-picker";
 import type { DateRangePickerRanges } from "../../../components/ha-date-range-picker";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button-next";
 import "../../../components/ha-icon-button-prev";
+import "../../../components/ha-svg-icon";
 import type { EnergyData } from "../../../data/energy";
 import { CompareMode, getEnergyDataCollection } from "../../../data/energy";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
-import { calcDateRange } from "../../../common/datetime/calc_date_range";
-import type { DateRange } from "../../../common/datetime/calc_date_range";

 const RANGE_KEYS: DateRange[] = [
  "today",
@@ -233,25 +234,30 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
            </ha-button>`
          : nothing}

-        <ha-button-menu>
+        <ha-dropdown
+          placement="bottom-end"
+          @wa-select=${this._handleMenuAction}
+        >
          <ha-icon-button
            slot="trigger"
            .label=${this.hass.localize("ui.common.menu")}
            .path=${mdiDotsVertical}
          ></ha-icon-button>
          ${this.allowCompare
-            ? html`<ha-check-list-item
-                left
-                @request-selected=${this._toggleCompare}
-                .selected=${this._compare}
-              >
+            ? html`<ha-dropdown-item value="toggle-compare">
+                ${this._compare
+                  ? html`<ha-svg-icon
+                      slot="icon"
+                      .path=${mdiCheck}
+                    ></ha-svg-icon>`
+                  : nothing}
                ${this.hass.localize(
                  "ui.panel.lovelace.components.energy_period_selector.compare"
                )}
-              </ha-check-list-item>`
+              </ha-dropdown-item>`
            : nothing}
          <slot name="overflow-menu"></slot>
-        </ha-button-menu>
+        </ha-dropdown>
      </div>
    `;
  }
@@ -464,11 +470,15 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
    this._datepickerOpen = ev.detail.open;
  }

-  private _toggleCompare(ev: CustomEvent<RequestSelectedDetail>) {
-    if (ev.detail.source !== "interaction") {
-      return;
+  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+    const value = ev.detail.item.value;
+    if (value === "toggle-compare") {
+      this._toggleCompare();
    }
-    this._compare = ev.detail.selected;
+  }
+
+  private _toggleCompare() {
+    this._compare = !this._compare;
    const energyCollection = getEnergyDataCollection(this.hass, {
      key: this.collectionKey,
    });
--- a/src/panels/lovelace/components/hui-section-edit-mode.ts
+++ b/src/panels/lovelace/components/hui-section-edit-mode.ts
@@ -2,9 +2,7 @@ import { mdiDelete, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
--- a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts
+++ b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts
@@ -1,4 +1,3 @@
-import type { ActionDetail } from "@material/mwc-list";
 import {
  mdiClose,
  mdiDotsVertical,
@@ -12,11 +11,12 @@ import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/ha-button";
-import "../../../../components/ha-button-menu";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-dropdown";
+import "../../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-list-item";
 import "../../../../components/ha-tab-group";
 import "../../../../components/ha-tab-group-tab";
 import "../../../../components/ha-yaml-editor";
@@ -165,38 +165,33 @@ export class HuiDialogEditSection
            .path=${mdiClose}
          ></ha-icon-button>
          <span slot="title">${heading}</span>
-          <ha-button-menu
+          <ha-dropdown
            slot="actionItems"
-            fixed
-            corner="BOTTOM_END"
-            menu-corner="END"
+            placement="bottom-end"
            @closed=${stopPropagation}
-            @action=${this._handleAction}
+            @wa-select=${this._handleAction}
          >
            <ha-icon-button
              slot="trigger"
              .label=${this.hass!.localize("ui.common.menu")}
              .path=${mdiDotsVertical}
            ></ha-icon-button>
-            <ha-list-item graphic="icon">
+            <ha-dropdown-item value="toggle-yaml">
+              <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
              ${this.hass.localize(
                `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}`
              )}
+            </ha-dropdown-item>
+            <ha-dropdown-item value="move-to-view">
              <ha-svg-icon
-                slot="graphic"
-                .path=${mdiPlaylistEdit}
+                slot="icon"
+                .path=${mdiFileMoveOutline}
              ></ha-svg-icon>
-            </ha-list-item>
-            <ha-list-item graphic="icon">
              ${this.hass!.localize(
                "ui.panel.lovelace.editor.edit_view.move_to_view"
              )}
-              <ha-svg-icon
-                slot="graphic"
-                .path=${mdiFileMoveOutline}
-              ></ha-svg-icon>
-            </ha-list-item>
-          </ha-button-menu>
+            </ha-dropdown-item>
+          </ha-dropdown>
          ${!this._yamlMode
            ? html`
                <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
@@ -246,14 +241,13 @@ export class HuiDialogEditSection
    this._currTab = newTab;
  }

-  private async _handleAction(ev: CustomEvent<ActionDetail>) {
-    ev.stopPropagation();
-    ev.preventDefault();
-    switch (ev.detail.index) {
-      case 0:
+  private async _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+    const value = ev.detail.item.value;
+    switch (value) {
+      case "toggle-yaml":
        this._yamlMode = !this._yamlMode;
        break;
-      case 1:
+      case "move-to-view":
        this._openSelectView();
        break;
    }
--- a/src/panels/media-browser/ha-panel-media-browser.ts
+++ b/src/panels/media-browser/ha-panel-media-browser.ts
@@ -1,4 +1,3 @@
-import type { ActionDetail } from "@material/mwc-list";
 import {
  mdiAlphaABoxOutline,
  mdiDotsVertical,
@@ -12,9 +11,11 @@ import { storage } from "../../common/decorators/storage";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
+import "../../components/ha-dropdown";
+import "../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-arrow-prev";
-import "../../components/ha-list-item";
 import "../../components/ha-menu-button";
 import "../../components/ha-top-app-bar-fixed";
 import "../../components/media-player/ha-media-manage-button";
@@ -119,43 +120,40 @@ class PanelMediaBrowser extends LitElement {
          .currentItem=${this._currentItem}
          @media-refresh=${this._refreshMedia}
        ></ha-media-manage-button>
-        <ha-button-menu slot="actionItems" @action=${this._handleMenuAction}>
+        <ha-dropdown slot="actionItems" @wa-select=${this._handleMenuAction}>
          <ha-icon-button
            slot="trigger"
            .label=${this.hass.localize("ui.common.menu")}
            .path=${mdiDotsVertical}
          ></ha-icon-button>
-          <ha-list-item graphic="icon">
-            ${this.hass.localize("ui.components.media-browser.auto")}
-            <ha-svg-icon
+          <ha-dropdown-item
+            value="auto"
            class=${this._preferredLayout === "auto"
              ? "selected_menu_item"
              : ""}
-              slot="graphic"
-              .path=${mdiAlphaABoxOutline}
-            ></ha-svg-icon>
-          </ha-list-item>
-          <ha-list-item graphic="icon">
-            ${this.hass.localize("ui.components.media-browser.grid")}
-            <ha-svg-icon
+          >
+            ${this.hass.localize("ui.components.media-browser.auto")}
+            <ha-svg-icon slot="icon" .path=${mdiAlphaABoxOutline}></ha-svg-icon>
+          </ha-dropdown-item>
+          <ha-dropdown-item
+            value="grid"
            class=${this._preferredLayout === "grid"
              ? "selected_menu_item"
              : ""}
-              slot="graphic"
-              .path=${mdiGrid}
-            ></ha-svg-icon>
-          </ha-list-item>
-          <ha-list-item graphic="icon">
-            ${this.hass.localize("ui.components.media-browser.list")}
-            <ha-svg-icon
-              slot="graphic"
+          >
+            ${this.hass.localize("ui.components.media-browser.grid")}
+            <ha-svg-icon slot="icon" .path=${mdiGrid}></ha-svg-icon>
+          </ha-dropdown-item>
+          <ha-dropdown-item
+            value="list"
            class=${this._preferredLayout === "list"
              ? "selected_menu_item"
              : ""}
-              .path=${mdiListBoxOutline}
-            ></ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+          >
+            ${this.hass.localize("ui.components.media-browser.list")}
+            <ha-svg-icon slot="icon" .path=${mdiListBoxOutline}></ha-svg-icon>
+          </ha-dropdown-item>
+        </ha-dropdown>
        <ha-media-player-browse
          .hass=${this.hass}
          .entityId=${this._entityId}
@@ -174,17 +172,11 @@ class PanelMediaBrowser extends LitElement {
    `;
  }

-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        this._preferredLayout = "auto";
-        break;
-      case 1:
-        this._preferredLayout = "grid";
-        break;
-      case 2:
-        this._preferredLayout = "list";
-        break;
+  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+    const value = ev.detail.item.value;
+
+    if (["auto", "grid", "list"].includes(value)) {
+      this._preferredLayout = value as MediaPlayerLayoutType;
    }
  }

@@ -372,6 +364,10 @@ class PanelMediaBrowser extends LitElement {
          color: var(--primary-color);
        }

+        .selected_menu_item ha-svg-icon {
+          color: currentColor;
+        }
+
        ha-bar-media-player {
          position: fixed;
          bottom: var(--safe-area-inset-bottom, 0px);