diff --git a/app/assets/javascripts/admin/addon/templates/customize.hbs b/app/assets/javascripts/admin/addon/templates/customize.hbs
index dac792775a4..5521e77a770 100644
--- a/app/assets/javascripts/admin/addon/templates/customize.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize.hbs
@@ -3,60 +3,60 @@
     <NavItem
       @route="adminCustomizeThemes"
       @label="admin.customize.theme.title"
-      @class="admin-customize-themes"
+      class="admin-customize-themes"
     />
     <NavItem
       @route="adminCustomize.colors"
       @label="admin.customize.colors.title"
-      @class="admin-customize-colors"
+      class="admin-customize-colors"
     />
     <NavItem
       @route="adminSiteText"
       @label="admin.site_text.title"
-      @class="admin-customize-site-text"
+      class="admin-customize-site-text"
     />
     <NavItem
       @route="adminCustomizeEmailTemplates"
       @label="admin.customize.email_templates.title"
-      @class="admin-customize-email-templates"
+      class="admin-customize-email-templates"
     />
     <NavItem
       @route="adminCustomizeEmailStyle"
       @label="admin.customize.email_style.title"
-      @class="admin-customize-email-styles"
+      class="admin-customize-email-styles"
     />
     <NavItem
       @route="adminUserFields"
       @label="admin.user_fields.title"
-      @class="admin-customize-user-fields"
+      class="admin-customize-user-fields"
     />
     <NavItem
       @route="adminEmojis"
       @label="admin.emoji.title"
-      @class="admin-customize-emojis"
+      class="admin-customize-emojis"
     />
     <NavItem
       @route="adminPermalinks"
       @label="admin.permalink.title"
-      @class="admin-customize-permalinks"
+      class="admin-customize-permalinks"
     />
     <NavItem
       @route="adminEmbedding"
       @label="admin.embedding.title"
-      @class="admin-customize-embedding"
+      class="admin-customize-embedding"
     />
     {{#if this.siteSettings.experimental_form_templates}}
       <NavItem
         @route="adminCustomizeFormTemplates"
         @label="admin.form_templates.nav_title"
-        @class="admin-customize-form-templates"
+        class="admin-customize-form-templates"
       />
     {{/if}}
   {{/if}}
   <NavItem
     @route="adminWatchedWords"
     @label="admin.watched_words.title"
-    @class="admin-customize-watched-words"
+    class="admin-customize-watched-words"
   />
 </AdminNav>
 
diff --git a/app/assets/javascripts/admin/addon/templates/users-list.hbs b/app/assets/javascripts/admin/addon/templates/users-list.hbs
index d041bfef1df..f04784518b7 100644
--- a/app/assets/javascripts/admin/addon/templates/users-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/users-list.hbs
@@ -5,39 +5,39 @@
         @route="adminUsersList.show"
         @routeParam="active"
         @label="admin.users.nav.active"
-        @class="active-users"
+        class="active-users"
       />
       <NavItem
         @route="adminUsersList.show"
         @routeParam="new"
         @label="admin.users.nav.new"
-        @class="new-users"
+        class="new-users"
       />
       <NavItem
         @route="adminUsersList.show"
         @routeParam="staff"
         @label="admin.users.nav.staff"
-        @class="staff-users"
+        class="staff-users"
       />
       <NavItem
         @route="adminUsersList.show"
         @routeParam="suspended"
         @label="admin.users.nav.suspended"
-        @class="suspended-users"
+        class="suspended-users"
       />
       <NavItem
         @route="adminUsersList.show"
         @routeParam="silenced"
         @label="admin.users.nav.silenced"
-        @class="silenced-users"
+        class="silenced-users"
       />
       <NavItem
         @route="adminUsersList.show"
         @routeParam="staged"
         @label="admin.users.nav.staged"
-        @class="staged-users"
+        class="staged-users"
       />
-      <NavItem @route="groups" @label="groups.index.title" @class="groups" />
+      <NavItem @route="groups" @label="groups.index.title" class="groups" />
       <PluginOutlet @name="admin-users-list-nav-after" />
 
       <li class="admin-actions">
diff --git a/app/assets/javascripts/discourse/app/components/nav-item.gjs b/app/assets/javascripts/discourse/app/components/nav-item.gjs
index e1a281cc96a..445872c031f 100644
--- a/app/assets/javascripts/discourse/app/components/nav-item.gjs
+++ b/app/assets/javascripts/discourse/app/components/nav-item.gjs
@@ -3,6 +3,7 @@ import Component from "@glimmer/component";
 import { LinkTo } from "@ember/routing";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import concatClass from "discourse/helpers/concat-class";
 import getURL from "discourse-common/lib/get-url";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import I18n from "discourse-i18n";
@@ -31,7 +32,7 @@ export default class NavItem extends Component {
   }
 
   <template>
-    <li class={{if this.active "active"}}>
+    <li class={{concatClass (if this.active "active") @class}} ...attributes>
       {{#if @routeParam}}
         <LinkTo
           @route={{@route}}