diff --git a/app/assets/javascripts/discourse/app/components/nav-item.gjs b/app/assets/javascripts/discourse/app/components/nav-item.gjs
new file mode 100644
index 00000000000..e1a281cc96a
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/nav-item.gjs
@@ -0,0 +1,47 @@
+/* You might be looking for navigation-item. */
+import Component from "@glimmer/component";
+import { LinkTo } from "@ember/routing";
+import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import getURL from "discourse-common/lib/get-url";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import I18n from "discourse-i18n";
+
+export default class NavItem extends Component {
+  @service router;
+
+  get contents() {
+    const text = this.args.i18nLabel || I18n.t(this.args.label);
+    if (this.args.icon) {
+      return htmlSafe(`${iconHTML(this.args.icon)} ${text}`);
+    }
+    return text;
+  }
+
+  get active() {
+    if (!this.args.route) {
+      return;
+    }
+
+    if (this.args.routeParam && this.router.currentRoute) {
+      return this.router.currentRoute.params.filter === this.args.routeParam;
+    }
+
+    return this.router.isActive(this.args.route);
+  }
+
+  <template>
+    <li class={{if this.active "active"}}>
+      {{#if @routeParam}}
+        <LinkTo
+          @route={{@route}}
+          @model={{@routeParam}}
+        >{{this.contents}}</LinkTo>
+      {{else if @route}}
+        <LinkTo @route={{@route}}>{{this.contents}}</LinkTo>
+      {{else}}
+        <a href={{getURL @path}} data-auto-route="true">{{this.contents}}</a>
+      {{/if}}
+    </li>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/nav-item.hbs b/app/assets/javascripts/discourse/app/components/nav-item.hbs
deleted file mode 100644
index 526af9e1aa8..00000000000
--- a/app/assets/javascripts/discourse/app/components/nav-item.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{#if this.routeParam}}
-  <LinkTo
-    @route={{this.route}}
-    @model={{this.routeParam}}
-  >{{this.contents}}</LinkTo>
-{{else if this.route}}
-  <LinkTo @route={{this.route}}>{{this.contents}}</LinkTo>
-{{else}}
-  <a href={{get-url this.path}} data-auto-route="true">{{this.contents}}</a>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/nav-item.js b/app/assets/javascripts/discourse/app/components/nav-item.js
deleted file mode 100644
index 73ee32d52ba..00000000000
--- a/app/assets/javascripts/discourse/app/components/nav-item.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Component from "@ember/component";
-/* You might be looking for navigation-item. */
-import { inject as service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
-import { iconHTML } from "discourse-common/lib/icon-library";
-import discourseComputed from "discourse-common/utils/decorators";
-import I18n from "discourse-i18n";
-
-export default Component.extend({
-  tagName: "li",
-  classNameBindings: ["active"],
-  router: service(),
-
-  @discourseComputed("label", "i18nLabel", "icon")
-  contents(label, i18nLabel, icon) {
-    let text = i18nLabel || I18n.t(label);
-    if (icon) {
-      return htmlSafe(`${iconHTML(icon)} ${text}`);
-    }
-    return text;
-  },
-
-  @discourseComputed("route", "router.currentRoute")
-  active(route, currentRoute) {
-    if (!route) {
-      return;
-    }
-
-    const routeParam = this.routeParam;
-    if (routeParam && currentRoute) {
-      return currentRoute.params["filter"] === routeParam;
-    }
-
-    return this.router.isActive(route);
-  },
-});