diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
index b64fb33fcdd..4ef30f9c4a6 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
@@ -28,7 +28,13 @@ export default class SectionLink extends Component {
     let classNames = ["sidebar-section-link", "sidebar-row"];
 
     if (this.args.linkName) {
-      classNames.push(`sidebar-section-link-${this.args.linkName}`);
+      classNames.push(
+        `sidebar-section-link-${this.args.linkName
+          .split(" ")
+          .filter((s) => s)
+          .join("-")
+          .toLowerCase()}`
+      );
     }
 
     if (this.args.class) {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js
index d50446288e1..822438680de 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js
@@ -18,7 +18,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
   setupRenderingTest(hooks);
 
   test("default class attribute for link", async function (assert) {
-    const template = hbs`<Sidebar::SectionLink @linkName="test" @route="discovery.latest" />`;
+    const template = hbs`<Sidebar::SectionLink @linkName="Test   Meta" @route="discovery.latest" />`;
 
     await render(template);
 
@@ -29,14 +29,14 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
         "ember-view",
         "sidebar-row",
         "sidebar-section-link",
-        "sidebar-section-link-test",
+        "sidebar-section-link-test-meta",
       ],
       "has the right class attribute for the link"
     );
   });
 
   test("custom class attribute for link", async function (assert) {
-    const template = hbs`<Sidebar::SectionLink @linkName="test" @route="discovery.latest" @class="123 abc" />`;
+    const template = hbs`<Sidebar::SectionLink @linkName="Test   Meta" @route="discovery.latest" @class="123 abc" />`;
 
     await render(template);
 
@@ -49,7 +49,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
         "ember-view",
         "sidebar-row",
         "sidebar-section-link",
-        "sidebar-section-link-test",
+        "sidebar-section-link-test-meta",
       ],
       "has the right class attribute for the link"
     );