diff --git a/src/components/ha-menu-button.js b/src/components/ha-menu-button.js
deleted file mode 100644
index 80c959f541..0000000000
--- a/src/components/ha-menu-button.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import "@polymer/paper-icon-button/paper-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import EventsMixin from "../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HaMenuButton extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <paper-icon-button
-        icon="[[_getIcon(hassio)]]"
-        on-click="toggleMenu"
-      ></paper-icon-button>
-    `;
-  }
-
-  static get properties() {
-    return {
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
-      hassio: {
-        type: Boolean,
-        value: false,
-      },
-    };
-  }
-
-  toggleMenu(ev) {
-    ev.stopPropagation();
-    this.fire(this.showMenu ? "hass-close-menu" : "hass-open-menu");
-  }
-
-  _getIcon(hassio) {
-    // hass:menu
-    return `${hassio ? "hassio" : "hass"}:menu`;
-  }
-}
-
-customElements.define("ha-menu-button", HaMenuButton);
diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts
new file mode 100644
index 0000000000..199d5228ac
--- /dev/null
+++ b/src/components/ha-menu-button.ts
@@ -0,0 +1,44 @@
+import "@polymer/paper-icon-button/paper-icon-button";
+import {
+  property,
+  TemplateResult,
+  LitElement,
+  html,
+  customElement,
+} from "lit-element";
+
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("ha-menu-button")
+class HaMenuButton extends LitElement {
+  @property({ type: Boolean })
+  public showMenu = false;
+
+  @property({ type: Boolean })
+  public hassio = false;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <paper-icon-button
+        .icon=${this.hassio ? "hassio:menu" : "hass:menu"}
+        @click=${this._toggleMenu}
+      ></paper-icon-button>
+    `;
+  }
+
+  // We are not going to use ShadowDOM as we're rendering a single element
+  // without any CSS used.
+  protected createRenderRoot(): Element | ShadowRoot {
+    return this;
+  }
+
+  private _toggleMenu(): void {
+    fireEvent(this, this.showMenu ? "hass-close-menu" : "hass-open-menu");
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-menu-button": HaMenuButton;
+  }
+}