From 03985e3b28bf360b6b9d4d147532c5809b832d56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Thu, 17 Sep 2026 00:03:43 +0200
Subject: [PATCH] Keep text badges inline in navbar links (#3072)

---
 .changeset/navbar-nav-link-badge.md |  5 +++++
 core/scss/layout/_navbar.scss       | 25 ++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/navbar-nav-link-badge.md

diff --git a/.changeset/navbar-nav-link-badge.md b/.changeset/navbar-nav-link-badge.md
new file mode 100644
index 000000000..303d9f74e
--- /dev/null
+++ b/.changeset/navbar-nav-link-badge.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed text badges in navbar `.nav-link` overlapping the title and causing horizontal scroll in the stacked menu.
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index 7ea1dfd87..56c638c94 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -29,6 +29,11 @@
     .nav-link {
       justify-content: start;
       padding: var(--sidebar-nav-padding-y) var(--sidebar-nav-padding-x);
+
+      // In a vertical list the badge sits at the end of the row.
+      .badge:not(:empty) {
+        margin-inline-start: auto;
+      }
     }
 
     // One line, ellipsized — a title never wraps, so rows keep their height
@@ -344,13 +349,23 @@ Navbar
       min-height: 2.5rem;
       @include border-radius(var(--border-radius));
 
+      // A badge with text is part of the link's row, after the title. Only an
+      // empty badge is a notification dot pinned to the link's corner, so the
+      // absolute positioning is limited to `:empty` — a text badge positioned
+      // that way overlapped the title and, in a stacked list, hung past the
+      // link's edge and made the page scroll sideways.
       .badge {
-        position: absolute;
-        inset-inline-end: 0.5rem;
-        top: 0.5rem;
+        margin-inline-start: $spacer-2;
 
-        /* rtl:ignore */
-        transform: translate(calc(var(--dir) * 50%), -50%);
+        &:empty {
+          position: absolute;
+          inset-inline-end: 0.5rem;
+          top: 0.5rem;
+          margin-inline-start: 0;
+
+          /* rtl:ignore */
+          transform: translate(calc(var(--dir) * 50%), -50%);
+        }
       }
     }
   }