From 2bba2c5899211d978a7801be9a939322d8175170 Mon Sep 17 00:00:00 2001
From: mariohamann <mario.hamann@virtual-identity.com>
Date: Tue, 12 May 2026 22:14:51 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Add=20navigation=20item=20b?=
 =?UTF-8?q?adge=20template=20story=20with=20notification=20counts=20and=20?=
 =?UTF-8?q?status=20indicators?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Copilot <copilot@github.com>
---
 .changeset/navigation-item-badge-template.md  |  5 ++
 .../navigation-item-badge.stories.ts          | 54 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 .changeset/navigation-item-badge-template.md
 create mode 100644 packages/docs/src/stories/templates/navigation-item-badge.stories.ts

diff --git a/.changeset/navigation-item-badge-template.md b/.changeset/navigation-item-badge-template.md
new file mode 100644
index 0000000000..a5e6f69159
--- /dev/null
+++ b/.changeset/navigation-item-badge-template.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Added a new template story showing `sd-navigation-item` combined with `sd-badge` for horizontal navigation with notification counts and status indicators.
diff --git a/packages/docs/src/stories/templates/navigation-item-badge.stories.ts b/packages/docs/src/stories/templates/navigation-item-badge.stories.ts
new file mode 100644
index 0000000000..f6841abbbe
--- /dev/null
+++ b/packages/docs/src/stories/templates/navigation-item-badge.stories.ts
@@ -0,0 +1,54 @@
+import '../../../../components/src/solid-components';
+import { html } from 'lit-html';
+
+export default {
+  tags: ['!dev', 'autodocs'],
+  title: 'Templates/Navigation Item Badge',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/VTztxQ5pWG7ARg8hCX6PfR/Solid-DS-%E2%80%93-Component-Library?node-id=5072-26390'
+    }
+  }
+};
+
+/**
+ * Navigation items with badges aligned horizontally, showing notification counts and status indicators.
+ */
+export const NavigationItemWithBadge = {
+  name: 'Navigation Item with Badge',
+  render: () => html`
+    <nav aria-label="Main navigation" class="flex items-center gap-1">
+      <sd-navigation-item href="#"> Overview </sd-navigation-item>
+      <sd-navigation-item href="#" current>
+        <span class="inline-flex items-center gap-2">
+          Requests
+          <sd-badge role="status">
+            12
+            <span class="sr-only">open requests</span>
+          </sd-badge>
+        </span>
+      </sd-navigation-item>
+      <sd-navigation-item href="#">
+        <span class="inline-flex items-center gap-2">
+          Messages
+          <sd-badge variant="red" role="status">
+            3
+            <span class="sr-only">unread messages</span>
+          </sd-badge>
+        </span>
+      </sd-navigation-item>
+      <sd-navigation-item href="#">
+        <span class="inline-flex items-center gap-2">
+          Notifications
+          <sd-badge variant="green" role="status">
+            99+
+            <span class="sr-only">new notifications</span>
+          </sd-badge>
+        </span>
+      </sd-navigation-item>
+      <sd-navigation-item href="#"> Reports </sd-navigation-item>
+    </nav>
+  `
+};