From 872d744a92d601151d4714ac41eaa9b44984402d Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@siemens.com>
Date: Fri, 30 Jan 2026 17:09:33 +0100
Subject: [PATCH 1/2] refactor(navbar-vertical): update badges visibility logic

---
 .../element-ng/navbar-vertical/index.api.md   |   1 +
 .../element-examples/navbar-vertical.spec.ts  |  31 +++
 ...d-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...t-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...bar-vertical-legacy--collapsed-flyout.yaml |  13 +-
 ...-si-navbar-vertical-legacy--collapsed.yaml |   6 +-
 ...d-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...vbar-vertical-legacy--mobile-expanded.yaml |   9 +-
 ...y-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...r-vertical--si-navbar-vertical-legacy.yaml |   9 +-
 ...d-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...t-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...-si-navbar-vertical--collapsed-flyout.yaml |   5 +-
 ...rtical--si-navbar-vertical--collapsed.yaml |   4 +-
 ...d-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...--si-navbar-vertical--mobile-expanded.yaml |   3 +-
 ...d-element-examples-chromium-dark-linux.png |   3 +
 ...-element-examples-chromium-light-linux.png |   3 +
 ...t-element-examples-chromium-dark-linux.png |   3 +
 ...-element-examples-chromium-light-linux.png |   3 +
 ...bar-vertical-badges--collapsed-flyout.yaml |  30 +++
 ...-si-navbar-vertical-badges--collapsed.yaml |  24 ++
 ...s-element-examples-chromium-dark-linux.png |   3 +
 ...-element-examples-chromium-light-linux.png |   3 +
 ...r-vertical--si-navbar-vertical-badges.yaml |  31 +++
 ...l-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...i-navbar-vertical--si-navbar-vertical.yaml |   3 +-
 ...navbar-vertical-item-legacy.component.html |   1 -
 .../si-navbar-vertical-item.component.html    |  38 ++--
 .../si-navbar-vertical-item.component.scss    |  96 +++++++-
 .../si-navbar-vertical-item.component.spec.ts | 209 +++++++++++++++---
 .../si-navbar-vertical-item.component.ts      |  18 +-
 .../si-navbar-vertical.component.scss         |  16 +-
 .../si-navbar-vertical.component.ts           |   3 +-
 .../si-navbar-vertical.model.ts               |   5 +
 .../si-navbar-vertical-badges.html            |  24 ++
 .../si-navbar-vertical-badges.ts              | 127 +++++++++++
 .../si-navbar-vertical-legacy.ts              |  38 ++--
 .../si-navbar-vertical-routing.ts             |  33 ++-
 .../si-navbar-vertical/si-navbar-vertical.ts  |   8 +-
 48 files changed, 718 insertions(+), 149 deletions(-)
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-element-examples-chromium-dark-linux.png
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-element-examples-chromium-light-linux.png
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout-element-examples-chromium-dark-linux.png
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout-element-examples-chromium-light-linux.png
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout.yaml
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed.yaml
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges-element-examples-chromium-dark-linux.png
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges-element-examples-chromium-light-linux.png
 create mode 100644 playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges.yaml
 create mode 100644 src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.html
 create mode 100644 src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.ts

diff --git a/api-goldens/element-ng/navbar-vertical/index.api.md b/api-goldens/element-ng/navbar-vertical/index.api.md
index 13ef5ded1..07d02354e 100644
--- a/api-goldens/element-ng/navbar-vertical/index.api.md
+++ b/api-goldens/element-ng/navbar-vertical/index.api.md
@@ -30,6 +30,7 @@ export interface NavbarVerticalItemAction extends NavbarVerticalItemBase {
 export interface NavbarVerticalItemBase {
     badge?: string | number;
     badgeColor?: string;
+    hideBadgeWhenCollapsed?: boolean;
     icon?: string;
     id?: string;
     label: TranslatableString;
diff --git a/playwright/e2e/element-examples/navbar-vertical.spec.ts b/playwright/e2e/element-examples/navbar-vertical.spec.ts
index 74363e753..e1f41df69 100644
--- a/playwright/e2e/element-examples/navbar-vertical.spec.ts
+++ b/playwright/e2e/element-examples/navbar-vertical.spec.ts
@@ -59,3 +59,34 @@ test.describe('navbar vertical', () => {
     await si.runVisualAndA11yTests('mobile-expanded');
   });
 });
+
+test.describe('navbar vertical badges', () => {
+  const example = 'si-navbar-vertical/si-navbar-vertical-badges';
+
+  test(example + ' expanded', async ({ page, si }) => {
+    await si.visitExample(example);
+    await page.getByRole('link', { name: 'Home' }).click();
+    await expect(page.getByRole('link', { name: 'Home' })).toHaveClass(/active/);
+    await page.getByRole('button', { name: 'Group with badges' }).click();
+    await page.getByRole('link', { name: 'Sub item critical' }).click();
+    await expect(page.getByRole('link', { name: 'Sub item critical' })).toHaveClass(/active/);
+    await page.locator('.si-layout-main-padding').click(); // to move focus
+
+    await si.waitForAllAnimationsToComplete();
+    await si.runVisualAndA11yTests();
+  });
+
+  test(example + ' collapsed', async ({ page, si }) => {
+    await si.visitExample(example);
+
+    await page.getByLabel('collapse', { exact: true }).click();
+    await page.getByRole('button', { name: 'Group with badges' }).click();
+    await expect(page.getByRole('group', { name: 'Group with badges' })).toBeVisible();
+    await page.getByRole('link', { name: 'Sub item info' }).click();
+
+    await si.waitForAllAnimationsToComplete();
+    await si.runVisualAndA11yTests('collapsed');
+    await page.getByRole('button', { name: 'Group with badges' }).click();
+    await si.runVisualAndA11yTests('collapsed-flyout');
+  });
+});
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-element-examples-chromium-dark-linux.png
index 928be1f8d..6eb4ea2ae 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:45bf8701b44333537a045043bf7df2813a02764805c55a076daf1629027c613f
-size 14379
+oid sha256:0b52e28f0b203915a9f593b468101d4f2907c83b433c6eaad24a4eef44aecdfa
+size 14468
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-element-examples-chromium-light-linux.png
index 921bcea89..bd2ba9214 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bae3295c0db97f1d906a091effd38f5457d740a61c57bb51c8bbec6c7fd7795e
-size 13875
+oid sha256:b7c731b0252130601cde5283a33c01fbb85f40ead52d8c98e511af28d3507e6c
+size 13917
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout-element-examples-chromium-dark-linux.png
index 02d056337..d18f07e8d 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f794e0f0742962ed9869b01de049691087bf38fb650f4cde0000b83384a772d2
-size 18731
+oid sha256:653bd517ce48e7ac96bd406c822229771b7378ee7b079f24fcc7d76535948cd2
+size 20706
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout-element-examples-chromium-light-linux.png
index 14fad0a52..8e80bd689 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:663c3dfaca8dd9b61fbadc3d74f5fb6d3ff40d81cb4f35cdb3274e0aa89f7801
-size 18566
+oid sha256:4669827c120500c4b9faa4d0c95ca01baa13a4eaaae61158a9c24fcf84fab047
+size 20361
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout.yaml b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout.yaml
index 04bffd8e7..e044b6604 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout.yaml
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed-flyout.yaml
@@ -9,17 +9,18 @@
   - button "expand"
   - button "Search..."
   - button "expand Home"
-  - button "Documentation"
-  - group "Documentation":
-    - link "Sub Item 4":
+  - group "expand Home"
+  - button "Documentation 6"
+  - group "Documentation 6":
+    - link "Sub Item 4 1":
       - /url: "#/viewer/viewer/subItem4"
-    - link "Sub Item 5":
+    - link "Sub Item 5 2":
       - /url: "#/viewer/viewer/subItem5"
-    - link "Sub Item 6":
+    - link "Sub Item 6 3":
       - /url: "#/viewer/viewer/subItem6"
   - link "Energy & Sustainability":
     - /url: "#/viewer/viewer/energy"
-  - link "4 Test Coverage":
+  - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
   - heading "Here is a title" [level=2]
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed.yaml b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed.yaml
index bd2e79fee..0d0d106a5 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed.yaml
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--collapsed.yaml
@@ -9,10 +9,12 @@
   - button "expand"
   - button "Search..."
   - button "expand Home"
-  - button "Documentation"
+  - group "expand Home"
+  - button "Documentation 6"
+  - group "Documentation 6"
   - link "Energy & Sustainability":
     - /url: "#/viewer/viewer/energy"
-  - link "4 Test Coverage":
+  - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
   - heading "Here is a title" [level=2]
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded-element-examples-chromium-dark-linux.png
index 7df7bf52a..467f006cd 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4d3b8db025382ae4eedf1b2d05150d530c3c1b4995861c4b93a85911aa1d0100
-size 19083
+oid sha256:edc0c2cb5d3c4a14224a324c7330ac4c5573a4adaaa95d14dbf5215c12ac5d02
+size 20339
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded-element-examples-chromium-light-linux.png
index 103acdd69..e440c1f3e 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:217cee238d49d95307ef1c13df0e2b6dec7a8c8019335e5a5cbb24d4f23e5352
-size 18100
+oid sha256:75fe23f9ffbe96a71d329c15bd30902a0f5c3af3ea4c1f32fd3e8d8efd923af4
+size 19337
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded.yaml b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded.yaml
index 774e963d0..c20b58e28 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded.yaml
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy--mobile-expanded.yaml
@@ -9,17 +9,18 @@
   - link "Home":
     - /url: "#/viewer/viewer/Home"
   - button "expand Home"
+  - group "expand Home"
   - button "Documentation" [expanded]
   - group "Documentation":
-    - link "Sub Item 4":
+    - link "Sub Item 4 1":
       - /url: "#/viewer/viewer/subItem4"
-    - link "Sub Item 5":
+    - link "Sub Item 5 2":
       - /url: "#/viewer/viewer/subItem5"
-    - link "Sub Item 6":
+    - link "Sub Item 6 3":
       - /url: "#/viewer/viewer/subItem6"
   - link "Energy & Sustainability":
     - /url: "#/viewer/viewer/energy"
-  - link "Test Coverage 4":
+  - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
   - heading "Here is a title" [level=2]
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy-element-examples-chromium-dark-linux.png
index f10d3d8ea..ca799a9fd 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2eaee582f6cfd0956512ed53611184e221e9c1ea574ff7080cc31fab5e75ca3a
-size 25521
+oid sha256:fc358d7d3fea648a245d0886f1de8f235972d5f0807a836c6b674c09b54ad318
+size 26790
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy-element-examples-chromium-light-linux.png
index 26b9b9dcf..a88bc0088 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1c8464922bc1420bbb6302e590a8baef04a60431cbc3dcbc3a24fe180737dadc
-size 24458
+oid sha256:4ded5e9a87114513a62843ca95997690e013054eb003811d4c42b758db6e5d7c
+size 25723
diff --git a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy.yaml b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy.yaml
index fe701129d..beab92313 100644
--- a/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy.yaml
+++ b/playwright/snapshots/navbar-vertical-legacy.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-legacy.yaml
@@ -11,17 +11,18 @@
   - link "Home":
     - /url: "#/viewer/viewer/Home"
   - button "expand Home"
+  - group "expand Home"
   - button "Documentation" [expanded]
   - group "Documentation":
-    - link "Sub Item 4":
+    - link "Sub Item 4 1":
       - /url: "#/viewer/viewer/subItem4"
-    - link "Sub Item 5":
+    - link "Sub Item 5 2":
       - /url: "#/viewer/viewer/subItem5"
-    - link "Sub Item 6":
+    - link "Sub Item 6 3":
       - /url: "#/viewer/viewer/subItem6"
   - link "Energy & Sustainability":
     - /url: "#/viewer/viewer/energy"
-  - link "Test Coverage 4":
+  - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
   - heading "Here is a title" [level=2]
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-element-examples-chromium-dark-linux.png
index 9932c1d61..df0223c78 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9530cd2ef68aa941d6a85464c297278734602f221fd7ace03fb92c27e39d3c17
-size 16545
+oid sha256:07e7dc2bb8979bee3fd3c7f373a3b01b7cc2e5da0f151828e8fb7ec82f81319d
+size 16129
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-element-examples-chromium-light-linux.png
index 9a1d39600..32ce6c9d5 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8a0db10c592a6b190122f9e8b11970a371a9aba4675c39c7dd75590a4ba59b5f
-size 16099
+oid sha256:0470bc637c7dc1f25cd9faad9bcfe8e9678f22e89a7069c6308af51dbeaa83c9
+size 15650
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout-element-examples-chromium-dark-linux.png
index cd32d6d5f..7be7c49d6 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9e1072f3e247747572086991bccd5b86f7cb4ed3967e40f586c721a82182ca28
-size 21451
+oid sha256:5f52b6bfb1a30bb0363da5efef18731c9d17210996558a4a97aa02416a64c247
+size 20468
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout-element-examples-chromium-light-linux.png
index b6373435b..f9db8ca8a 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e467315ffb09f13ea99514b0c62ab8e8a4a926090920acdf02ab02294b0cc305
-size 21135
+oid sha256:0d12e69e498c4abbd66bc1937640a3908cf0bea3d6effcbfa2c74e943e4e1e80
+size 20206
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout.yaml b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout.yaml
index 922a042e5..266ae6670 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout.yaml
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed-flyout.yaml
@@ -13,15 +13,16 @@
     - /url: "#/viewer/viewer/energy"
   - button "User management"
   - group "User management":
-    - link "Sub item 4":
+    - link "Sub item":
       - /url: "#/viewer/viewer/subItem"
     - link "Sub item 2":
       - /url: "#/viewer/viewer/subItem2"
     - link "Sub item 3":
       - /url: "#/viewer/viewer/subItem3"
-  - link "4 Test coverage":
+  - link "Test coverage":
     - /url: "#/viewer/viewer/coverage"
   - button "Documentation"
+  - group "Documentation"
   - button "Action"
 - main:
   - heading "Here is a title" [level=2]
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed.yaml b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed.yaml
index ac7943b2c..22c2a51c8 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed.yaml
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--collapsed.yaml
@@ -12,9 +12,11 @@
   - link "Energy & sustainability":
     - /url: "#/viewer/viewer/energy"
   - button "User management"
-  - link "4 Test coverage":
+  - group "User management"
+  - link "Test coverage":
     - /url: "#/viewer/viewer/coverage"
   - button "Documentation"
+  - group "Documentation"
   - button "Action"
 - main:
   - heading "Here is a title" [level=2]
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded-element-examples-chromium-dark-linux.png
index 8f2435114..bf9108dff 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0270185b13bdadd47f9bbc93365b727a7eec6499ee0f420710dfdfaff0ea8f54
-size 25023
+oid sha256:9825f06ec15142e57391aa623d61d3dfc46195afebb0b5909b97c3b8f25fcbc2
+size 24394
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded-element-examples-chromium-light-linux.png
index b4fd4daea..29de597e1 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b6851babeb4c8647dabe3c91772ceda8646f909d74bc6b508e22bfa443590b0
-size 23964
+oid sha256:9fdb80f6e4fc1ee530c2eca29e22190d6f310f3b8d43adc5e25f66f8264c1499
+size 23387
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded.yaml b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded.yaml
index 453c19991..d0ead6eb4 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded.yaml
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical--mobile-expanded.yaml
@@ -13,7 +13,8 @@
   - link "Energy & sustainability":
     - /url: "#/viewer/viewer/energy"
   - button "User management"
-  - link "Test coverage 4":
+  - group "User management"
+  - link "Test coverage":
     - /url: "#/viewer/viewer/coverage"
   - button "Documentation" [expanded]
   - group "Documentation":
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-element-examples-chromium-dark-linux.png
new file mode 100644
index 000000000..2dc986e8b
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f29032b7df5e5009020dda4d4aa7b367b6b776e9be6e648829c9673b6f0f5e11
+size 21020
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-element-examples-chromium-light-linux.png
new file mode 100644
index 000000000..8059077f8
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6a512f1ff856ded12acdc2b524fae20d08be9c92252b6c5bc087210aaf1c5225
+size 20449
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout-element-examples-chromium-dark-linux.png
new file mode 100644
index 000000000..bd6d2592e
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:31badea1c11bd8053e62fb6c5394b0f94ebb3638bd4a4ea8c832f18ecb8d3afe
+size 28126
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout-element-examples-chromium-light-linux.png
new file mode 100644
index 000000000..655604d98
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c941dda7bef765fc14a4146fb80fde3f2e3a9ee689216547f606560cdeec0be5
+size 27760
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout.yaml b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout.yaml
new file mode 100644
index 000000000..5396b2675
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed-flyout.yaml
@@ -0,0 +1,30 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar Vertical Badges Example" [level=1]
+- navigation:
+  - button "expand"
+  - button "Search..."
+  - link "Home":
+    - /url: "#/viewer/viewer/home"
+  - link "Text badge Info":
+    - /url: "#/viewer/viewer/text-badge"
+  - button "Group with badges 6"
+  - group "Group with badges 6":
+    - link "Sub item critical 1":
+      - /url: "#/viewer/viewer/sub-badge-1"
+    - link "Sub item info 2":
+      - /url: "#/viewer/viewer/sub-badge-2"
+    - link "Sub item warning 3":
+      - /url: "#/viewer/viewer/sub-badge-3"
+  - button "Group item"
+  - group "Group item"
+  - link "Subtle badge 5":
+    - /url: "#/viewer/viewer/success"
+  - link /Danger emphasis badge \+\d+/:
+    - /url: "#/viewer/viewer/danger"
+- main:
+  - heading "Badge Examples" [level=2]
+  - text: Content with path 'sub-badge-2'
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed.yaml b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed.yaml
new file mode 100644
index 000000000..fc48b49b0
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges--collapsed.yaml
@@ -0,0 +1,24 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar Vertical Badges Example" [level=1]
+- navigation:
+  - button "expand"
+  - button "Search..."
+  - link "Home":
+    - /url: "#/viewer/viewer/home"
+  - link "Text badge Info":
+    - /url: "#/viewer/viewer/text-badge"
+  - button "Group with badges 6"
+  - group "Group with badges 6"
+  - button "Group item"
+  - group "Group item"
+  - link "Subtle badge 5":
+    - /url: "#/viewer/viewer/success"
+  - link /Danger emphasis badge \+\d+/:
+    - /url: "#/viewer/viewer/danger"
+- main:
+  - heading "Badge Examples" [level=2]
+  - text: Content with path 'sub-badge-2'
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges-element-examples-chromium-dark-linux.png
new file mode 100644
index 000000000..4c31a82ca
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges-element-examples-chromium-dark-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:11ace2a9f32080a81db70c7ff48e8106d9c67add1a7790090506ca5656f1b17d
+size 41236
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges-element-examples-chromium-light-linux.png
new file mode 100644
index 000000000..eac31dcf5
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges-element-examples-chromium-light-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:93ada3a8d02f95b1b83c369fcf11ac5822f5a796066efa57d0c56a6f3ad7fbc7
+size 39691
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges.yaml b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges.yaml
new file mode 100644
index 000000000..59fab8461
--- /dev/null
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-badges.yaml
@@ -0,0 +1,31 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar Vertical Badges Example" [level=1]
+- navigation:
+  - button "collapse" [expanded]
+  - textbox "Search..."
+  - link "Home Text":
+    - /url: "#/viewer/viewer/home"
+  - text: Badge Examples
+  - link "Text badge Info":
+    - /url: "#/viewer/viewer/text-badge"
+  - button "Group with badges" [expanded]
+  - group "Group with badges":
+    - link "Sub item critical 1":
+      - /url: "#/viewer/viewer/sub-badge-1"
+    - link "Sub item info 2":
+      - /url: "#/viewer/viewer/sub-badge-2"
+    - link "Sub item warning 3":
+      - /url: "#/viewer/viewer/sub-badge-3"
+  - button "Group item"
+  - group "Group item"
+  - link "Subtle badge 5":
+    - /url: "#/viewer/viewer/success"
+  - link /Danger emphasis badge \+\d+/:
+    - /url: "#/viewer/viewer/danger"
+- main:
+  - heading "Badge Examples" [level=2]
+  - text: Content with path 'sub-badge-1'
\ No newline at end of file
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-element-examples-chromium-dark-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-element-examples-chromium-dark-linux.png
index 833ecb15a..44769e0ea 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:35d23bc16ebea3f738ce33d34a0e3f076657e8368ce59f78aacabc2f260ea2e6
-size 30654
+oid sha256:99bca27795e13ba9708488db8d4072a71e1186c4a5a57d37962f8a2ec1aaa91c
+size 30019
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-element-examples-chromium-light-linux.png b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-element-examples-chromium-light-linux.png
index bf585ed45..88d75696c 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:60a1c614917a5c3a14aa6e1e102347f70e819a6e41048c8694426dd172b2057a
-size 29534
+oid sha256:25472e2ccff93467eb76c6ff395488c5d9a1c9e36c28366be53215c26fba74c1
+size 28949
diff --git a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical.yaml b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical.yaml
index 453c19991..d0ead6eb4 100644
--- a/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical.yaml
+++ b/playwright/snapshots/navbar-vertical.spec.ts-snapshots/si-navbar-vertical--si-navbar-vertical.yaml
@@ -13,7 +13,8 @@
   - link "Energy & sustainability":
     - /url: "#/viewer/viewer/energy"
   - button "User management"
-  - link "Test coverage 4":
+  - group "User management"
+  - link "Test coverage":
     - /url: "#/viewer/viewer/coverage"
   - button "Documentation" [expanded]
   - group "Documentation":
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item-legacy.component.html b/projects/element-ng/navbar-vertical/si-navbar-vertical-item-legacy.component.html
index b390311c1..eaa69b32e 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item-legacy.component.html
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item-legacy.component.html
@@ -19,7 +19,6 @@
     </a>
     <button
       type="button"
-      class="mt-0"
       [si-navbar-vertical-item]="item()"
       [siNavbarVerticalGroupTriggerFor]="group"
       [activeOverride]="mainLink.active"
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.html b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.html
index 0a0823670..e5df7c946 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.html
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.html
@@ -1,23 +1,27 @@
 @let icon = item().icon;
-@if (icon) {
-  <si-icon class="icon me-n2" [icon]="icon" />
-}
-@if (icon && formattedBadge()) {
-  <div class="w-100 h-100 position-absolute">
-    <span class="badge-text">{{ formattedBadge() }}</span>
+<div class="item-content d-flex align-items-center">
+  @if (icon) {
+    <si-icon class="icon" [icon]="icon" />
+  }
+  <div class="item-title text-truncate si-h5">
+    <ng-content />
   </div>
-}
-<div
-  class="item-title text-truncate si-h5"
-  [class.visually-hidden]="!this.parent && this.navbar.collapsed()"
->
-  <ng-content />
 </div>
-@if (formattedBadge()) {
-  <span [class]="['badge', item().badgeColor ? `bg-${item().badgeColor}` : '']">
-    {{ formattedBadge() }}
-  </span>
+@if (!navbar.textOnly() && formattedBadge()) {
+  <span
+    [class]="[
+      'badge',
+      item().badgeColor ? `bg-${item().badgeColor}` : 'bg-default',
+      textOnlyBadge() ? 'badge-text-only' : '',
+      navbar.collapsed() ? 'badge-collapsed' : ''
+    ]"
+    >{{ formattedBadge() }}</span
+  >
 }
 @if (group) {
-  <si-icon aria-hidden="true" class="dropdown-caret me-0 text-body" [icon]="icons.elementDown2" />
+  <si-icon
+    aria-hidden="true"
+    class="dropdown-caret me-0 p-0 text-body"
+    [icon]="icons.elementDown2"
+  />
 }
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss
index 7d55ab80f..d7c991cd7 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss
@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '@siemens/element-theme/src/styles/variables';
 
+$transition-duration: variables.$element-default-transition-duration;
+
 :host(.navbar-vertical-item) {
   display: flex;
   align-items: center;
@@ -16,20 +18,34 @@
   inline-size: 100%;
   border-radius: 0;
 
+  .item-content {
+    overflow: hidden;
+  }
+
   .item-title {
     margin-inline-start: map.get(variables.$spacers, 5);
   }
 
   .icon {
+    position: absolute;
     margin-inline-start: map.get(variables.$spacers, 5);
   }
 
   .icon + .item-title {
-    margin-inline-start: map.get(variables.$spacers, 5);
+    margin-inline-start: map.get(variables.$spacers, 5) + map.get(variables.$spacers, 4) + 24px;
+  }
+
+  &.show .badge:not(.badge-collapsed) {
+    display: none;
+  }
+
+  &:not(.show) .badge + .dropdown-caret {
+    margin-inline: 0;
+    padding-inline: 0;
   }
 
   &.active {
-    color: variables.$element-text-active;
+    color: variables.$element-action-primary-hover;
     background: variables.$element-base-1-selected;
 
     &::after {
@@ -38,7 +54,7 @@
       inset-block: 0;
       inset-inline-start: 0;
       inline-size: 4px;
-      background: variables.$element-ui-0;
+      background: variables.$element-action-primary-hover;
     }
   }
 
@@ -73,12 +89,41 @@
   }
 }
 
-:host-context(.nav-collapsed) :is(.badge, .dropdown-caret) {
-  display: none;
+.dropdown-caret {
+  opacity: 1;
+  transform-origin: center;
+  transition-property: opacity, inline-size, transform;
+  transition-duration:
+    calc($transition-duration / 2), calc($transition-duration / 2), $transition-duration;
+  transition-delay: calc($transition-duration / 2), 0s, 0s;
+  transition-timing-function: ease;
+}
+
+.item-title {
+  opacity: 1;
+  transition: opacity calc($transition-duration / 2) calc($transition-duration / 2) ease;
 }
 
-:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text {
-  display: none;
+:host-context(.nav-collapsed) :is(.dropdown-caret) {
+  opacity: 0;
+  inline-size: 0;
+  transition:
+    opacity 0s,
+    inline-size calc($transition-duration / 2) ease;
+}
+
+:host-context(.nav-collapsed) :is(.item-title) {
+  opacity: 0;
+  transition: opacity calc($transition-duration / 2) ease;
+}
+
+:host-context(.nav-collapsed) :is(.icon) {
+  animation: none;
+}
+
+:host-context(.nav-collapsed).hide-badge-collapsed .badge {
+  opacity: 0;
+  visibility: hidden;
 }
 
 :host-context(.link-with-items) > :host(button) {
@@ -107,7 +152,7 @@
     }
 
     .icon {
-      display: block;
+      display: flex;
     }
   }
 
@@ -117,11 +162,40 @@
 }
 
 .badge {
+  position: relative;
   margin-inline: auto 0;
+  transform: translate(0, 0);
+  transition-property:
+    transform, opacity, visibility, block-size, min-inline-size, border-radius, line-height,
+    padding, font-weight, color, font-size;
+  transition-duration:
+    $transition-duration, $transition-duration, $transition-duration, $transition-duration,
+    $transition-duration, $transition-duration, $transition-duration, $transition-duration,
+    $transition-duration, calc($transition-duration / 2), calc($transition-duration / 2);
+  transition-timing-function: ease-out;
 }
 
-.badge-text {
+.badge-collapsed:not(.dropdown-item .badge) {
   position: absolute;
-  inset-block-start: map.get(variables.$spacers, 2);
-  inset-inline-end: map.get(variables.$spacers, 3);
+  // Values calculated for smooth badge positioning during navbar collapse/expand
+  inset-inline-end: 12px;
+  transform: translate(6px, -9px);
+  block-size: 14px;
+  min-inline-size: 14px;
+  border-radius: 7px;
+  font-size: variables.$si-font-size-caption;
+  line-height: 14px;
+  padding-block: 0;
+  padding-inline: map.get(variables.$spacers, 2);
+  font-weight: variables.$si-font-weight-semibold;
+
+  :host(.dropdown-toggle) & {
+    inset-inline-end: 36px;
+    transform: translate(30px, -9px);
+  }
+
+  &.badge-text-only {
+    color: transparent;
+    font-size: 0;
+  }
 }
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts
index ce91fa0c8..1075adce6 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts
@@ -21,16 +21,33 @@ class TestHostComponent {
   });
 }
 
+@Component({
+  imports: [SiNavbarVerticalItemComponent],
+  template: ` <a class="navbar-vertical-item" [si-navbar-vertical-item]="item()"> Test Item </a> `
+})
+class TestHostWithBadgeVisibilityComponent {
+  readonly item = signal<NavbarVerticalItemLink>({
+    type: 'link',
+    label: 'Test Item',
+    href: '#'
+  });
+}
+
 describe('SiNavbarVerticalItemComponent', () => {
   let component: TestHostComponent;
   let fixture: ComponentFixture<TestHostComponent>;
 
   const mockNavbar = {
     collapsed: signal(false),
+    textOnly: signal(false),
     itemTriggered: jasmine.createSpy('itemTriggered')
   };
 
   beforeEach(async () => {
+    mockNavbar.collapsed.set(false);
+    mockNavbar.textOnly.set(false);
+    mockNavbar.itemTriggered.calls.reset();
+
     await TestBed.configureTestingModule({
       imports: [TestHostComponent],
       providers: [{ provide: SI_NAVBAR_VERTICAL, useValue: mockNavbar }]
@@ -81,7 +98,7 @@ describe('SiNavbarVerticalItemComponent', () => {
           label: 'Test',
           href: '#',
           badge,
-          badgeColor: 'primary'
+          badgeColor: 'info'
         });
         fixture.detectChanges();
 
@@ -100,7 +117,7 @@ describe('SiNavbarVerticalItemComponent', () => {
           label: 'Test',
           href: '#',
           badge,
-          badgeColor: 'primary'
+          badgeColor: 'info'
         });
         fixture.detectChanges();
 
@@ -138,7 +155,7 @@ describe('SiNavbarVerticalItemComponent', () => {
           label: 'Test',
           href: '#',
           badge,
-          badgeColor: 'primary'
+          badgeColor: 'info'
         });
         fixture.detectChanges();
 
@@ -149,59 +166,63 @@ describe('SiNavbarVerticalItemComponent', () => {
     });
   });
 
-  describe('badge-text behavior (collapsed view)', () => {
-    it('should display badge-text with formatted value when icon is present', () => {
+  describe('badge behavior (collapsed view)', () => {
+    it('should display badge with collapsed class when navbar is collapsed', () => {
+      // Set navbar to collapsed mode
+      mockNavbar.collapsed.set(true);
+
       component.item.set({
         type: 'link',
         label: 'Test',
         href: '#',
         icon: 'element-test',
-        badge: 250
+        badge: 250,
+        badgeColor: 'info'
       });
       fixture.detectChanges();
 
-      const badgeTextElement = fixture.nativeElement.querySelector('.badge-text');
-      expect(badgeTextElement).toBeTruthy();
-      expect(badgeTextElement.textContent.trim()).toBe('+99');
+      const badgeElement = fixture.nativeElement.querySelector('.badge');
+      expect(badgeElement).toBeTruthy();
+      expect(badgeElement.classList.contains('badge-collapsed')).toBe(true);
+      expect(badgeElement.textContent.trim()).toBe('+99');
     });
 
-    it('should not display badge-text when no icon is present', () => {
+    it('should not display badge when navbar is textOnly', () => {
+      // Set navbar to textOnly mode
+      mockNavbar.textOnly.set(true);
+
       component.item.set({
         type: 'link',
         label: 'Test',
         href: '#',
-        badge: 5
+        badge: 5,
+        badgeColor: 'info'
       });
       fixture.detectChanges();
 
-      const badgeTextElement = fixture.nativeElement.querySelector('.badge-text');
-      expect(badgeTextElement).toBeFalsy();
+      const badgeElement = fixture.nativeElement.querySelector('.badge');
+      expect(badgeElement).toBeFalsy();
     });
 
-    it('should hide item title when navbar is collapsed', () => {
+    it('should display badge when navbar is not textOnly', () => {
+      // Ensure navbar is not in textOnly mode
+      mockNavbar.textOnly.set(false);
+
       component.item.set({
         type: 'link',
-        label: 'Test Item',
+        label: 'Test',
         href: '#',
-        badge: 5
+        badge: 5,
+        badgeColor: 'info'
       });
-
-      // Initially expanded
-      mockNavbar.collapsed.set(false);
       fixture.detectChanges();
 
-      let titleElement = fixture.nativeElement.querySelector('.item-title');
-      expect(titleElement.classList.contains('visually-hidden')).toBe(false);
-
-      // Switch to collapsed mode
-      mockNavbar.collapsed.set(true);
-      fixture.detectChanges();
-
-      titleElement = fixture.nativeElement.querySelector('.item-title');
-      expect(titleElement.classList.contains('visually-hidden')).toBe(true);
+      const badgeElement = fixture.nativeElement.querySelector('.badge');
+      expect(badgeElement).toBeTruthy();
+      expect(badgeElement.textContent.trim()).toBe('5');
     });
 
-    it('should format badge-text values consistently with main badge', () => {
+    it('should format badge values consistently with main badge', () => {
       const testCases = [
         { badge: 4, expected: '4' },
         { badge: 44, expected: '44' },
@@ -218,14 +239,136 @@ describe('SiNavbarVerticalItemComponent', () => {
           label: 'Test',
           href: '#',
           icon: 'element-test',
-          badge
+          badge,
+          badgeColor: 'info'
         });
         fixture.detectChanges();
 
-        const badgeTextElement = fixture.nativeElement.querySelector('.badge-text');
-        expect(badgeTextElement).toBeTruthy();
-        expect(badgeTextElement.textContent.trim()).toBe(expected);
+        const badgeElement = fixture.nativeElement.querySelector('.badge');
+        expect(badgeElement).toBeTruthy();
+        expect(badgeElement.textContent.trim()).toBe(expected);
+      });
+    });
+  });
+
+  describe('hideBadgeWhenCollapsed behavior', () => {
+    let badgeTestComponent: TestHostWithBadgeVisibilityComponent;
+    let badgeTestFixture: ComponentFixture<TestHostWithBadgeVisibilityComponent>;
+
+    beforeEach(async () => {
+      TestBed.resetTestingModule();
+      await TestBed.configureTestingModule({
+        imports: [TestHostWithBadgeVisibilityComponent],
+        providers: [{ provide: SI_NAVBAR_VERTICAL, useValue: mockNavbar }]
+      }).compileComponents();
+
+      badgeTestFixture = TestBed.createComponent(TestHostWithBadgeVisibilityComponent);
+      badgeTestComponent = badgeTestFixture.componentInstance;
+      badgeTestFixture.detectChanges();
+    });
+
+    it('should add class when true', () => {
+      badgeTestComponent.item.set({
+        type: 'link',
+        label: 'Test',
+        href: '#',
+        badge: 5,
+        badgeColor: 'default',
+        hideBadgeWhenCollapsed: true
+      });
+      badgeTestFixture.detectChanges();
+
+      const linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+      expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(true);
+    });
+
+    it('should not add class when false', () => {
+      badgeTestComponent.item.set({
+        type: 'link',
+        label: 'Test',
+        href: '#',
+        badge: 5,
+        badgeColor: 'default',
+        hideBadgeWhenCollapsed: false
+      });
+      badgeTestFixture.detectChanges();
+
+      const linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+      expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
+    });
+
+    it('should default to false', () => {
+      badgeTestComponent.item.set({
+        type: 'link',
+        label: 'Test',
+        href: '#',
+        badge: 5,
+        badgeColor: 'default'
+      });
+      badgeTestFixture.detectChanges();
+
+      const linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+      expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
+    });
+
+    it('should not affect emphasis badges', () => {
+      const emphasisColors = ['primary-emphasis', 'danger-emphasis', 'warning-emphasis'];
+
+      emphasisColors.forEach(badgeColor => {
+        badgeTestComponent.item.set({
+          type: 'link',
+          label: 'Test',
+          href: '#',
+          badge: 5,
+          badgeColor
+        });
+        badgeTestFixture.detectChanges();
+
+        const linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+        expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
+
+        const badgeElement = badgeTestFixture.nativeElement.querySelector('.badge');
+        expect(badgeElement).toBeTruthy();
+        expect(badgeElement.classList.contains(`bg-${badgeColor}`)).toBe(true);
+      });
+    });
+
+    it('should toggle class when value changes', () => {
+      badgeTestComponent.item.set({
+        type: 'link',
+        label: 'Test',
+        href: '#',
+        badge: 5,
+        badgeColor: 'default',
+        hideBadgeWhenCollapsed: false
+      });
+      badgeTestFixture.detectChanges();
+      let linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+      expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
+
+      badgeTestComponent.item.set({
+        type: 'link',
+        label: 'Test',
+        href: '#',
+        badge: 5,
+        badgeColor: 'default',
+        hideBadgeWhenCollapsed: true
+      });
+      badgeTestFixture.detectChanges();
+      linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+      expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(true);
+
+      badgeTestComponent.item.set({
+        type: 'link',
+        label: 'Test',
+        href: '#',
+        badge: 5,
+        badgeColor: 'default',
+        hideBadgeWhenCollapsed: false
       });
+      badgeTestFixture.detectChanges();
+      linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+      expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
     });
   });
 });
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
index 10dbc235b..71da2e85d 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
@@ -42,7 +42,8 @@ type NavbarVerticalItemInteractive =
     'class': 'focus-inside',
     '[class.dropdown-item]': 'this.parent?.group?.flyout()',
     '[class.navbar-vertical-item]': '!this.parent?.group?.flyout()',
-    '[class.active]': 'active'
+    '[class.active]': 'active',
+    '[class.hide-badge-collapsed]': 'hideBadgeCollapsed()'
   }
 })
 export class SiNavbarVerticalItemComponent implements OnInit {
@@ -64,6 +65,21 @@ export class SiNavbarVerticalItemComponent implements OnInit {
   private readonly routerLinkActive = inject(RouterLinkActive, { optional: true });
   private readonly siLink = inject(SiLinkDirective, { optional: true });
 
+  /**
+   * Hides the badge in collapsed state
+   */
+  protected readonly hideBadgeCollapsed = computed(() => {
+    return !!(this.item() as NavbarVerticalItemInteractive).hideBadgeWhenCollapsed;
+  });
+
+  /**
+   * Determines if the badge contains text-only content (not numeric)
+   */
+  protected readonly textOnlyBadge = computed(() => {
+    const badge = this.item().badge;
+    return badge ? typeof badge !== 'number' : false;
+  });
+
   /**
    * Formats badge value to limit display to "+99" for numbers greater than 99
    */
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss
index e8494bca5..3a03b6c14 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss
@@ -10,6 +10,11 @@ $vertical-nav-transition-duration: all-variables.$element-default-transition-dur
   transition: padding-inline-start $vertical-nav-transition-duration;
   --si-layout-header-first-element-offset: 40px;
 
+  // Prevents initial animation on component load
+  &.component-enter {
+    transition: none;
+  }
+
   // This prevents applying the wrong padding-inline-start before the visible class is applied. This would trigger the animation
   &.ready:not(.visible) {
     padding-inline-start: 0 !important; // stylelint-disable-line declaration-no-important
@@ -28,7 +33,7 @@ nav {
   inset-block-end: 0;
   inset-inline-start: 0;
   inline-size: 0;
-  transition: inline-size all-variables.element-transition-duration(0.5s) ease;
+  transition: inline-size $vertical-nav-transition-duration ease;
 
   :host(.nav-collapsed) & {
     z-index: all-variables.$zindex-vertical-nav-collapsed;
@@ -64,9 +69,9 @@ nav {
   border-end-end-radius: all-variables.$border-radius;
 
   transition:
-    inline-size all-variables.element-transition-duration(0.5s) ease,
-    background-color all-variables.element-transition-duration(0.5s) ease,
-    box-shadow all-variables.element-transition-duration(0.5s) ease;
+    inline-size $vertical-nav-transition-duration ease,
+    background-color $vertical-nav-transition-duration ease,
+    box-shadow $vertical-nav-transition-duration ease;
 
   :host(:not(.nav-collapsed)) & {
     inline-size: $vertical-nav-width;
@@ -155,7 +160,8 @@ si-search-bar {
   :host {
     &.nav-collapsed {
       .btn-search {
-        display: block;
+        display: flex;
+        inline-size: 100%;
       }
     }
   }
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts
index ba746f30a..1bef80922 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts
@@ -86,7 +86,8 @@ export class SiNavbarVerticalItemGuardDirective {
     class: 'si-layout-inner',
     '[class.nav-collapsed]': 'collapsed()',
     '[class.nav-text-only]': 'textOnly()',
-    '[class.visible]': 'visible()'
+    '[class.visible]': 'visible()',
+    'animate.enter': 'component-enter'
   }
 })
 export class SiNavbarVerticalComponent implements OnChanges, OnInit {
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts
index a80109662..3df77586a 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts
@@ -20,6 +20,11 @@ export interface NavbarVerticalItemBase {
    * without `bg-` prefix.
    */
   badgeColor?: string;
+  /**
+   * Hide badge when navbar is collapsed.
+   * By default, badges are always visible (both expanded and collapsed).
+   */
+  hideBadgeWhenCollapsed?: boolean;
 }
 
 /** Use this type to create a group that can hold multiple items. */
diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.html b/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.html
new file mode 100644
index 000000000..46096ed3b
--- /dev/null
+++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.html
@@ -0,0 +1,24 @@
+<div class="has-navbar-fixed-top">
+  <si-application-header>
+    <si-header-brand>
+      <a routerLink="/" siHeaderLogo></a>
+      <h1 class="application-name">Navbar Vertical Badges Example</h1>
+    </si-header-brand>
+  </si-application-header>
+
+  <si-navbar-vertical
+    stateId="navbar-vertical-badges"
+    navbarCollapseButtonText="collapse"
+    navbarExpandButtonText="expand"
+    searchPlaceholder="Search..."
+    [items]="menuItems"
+    [searchable]="true"
+  >
+    <div class="si-layout-main-padding">
+      <div class="si-layout-header">
+        <h2 class="si-layout-title si-layout-top-element">Badge Examples</h2>
+      </div>
+      <router-outlet />
+    </div>
+  </si-navbar-vertical>
+</div>
diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.ts b/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.ts
new file mode 100644
index 000000000..89699189e
--- /dev/null
+++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.ts
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
+import {
+  SiApplicationHeaderComponent,
+  SiHeaderBrandDirective,
+  SiHeaderLogoDirective
+} from '@siemens/element-ng/application-header';
+import { NavbarVerticalItem, SiNavbarVerticalComponent } from '@siemens/element-ng/navbar-vertical';
+import { LOG_EVENT } from '@siemens/live-preview';
+
+@Component({
+  selector: 'app-sample',
+  imports: [
+    SiNavbarVerticalComponent,
+    SiApplicationHeaderComponent,
+    SiHeaderBrandDirective,
+    RouterLink,
+    RouterOutlet,
+    SiHeaderLogoDirective
+  ],
+  templateUrl: './si-navbar-vertical-badges.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SampleComponent implements OnInit {
+  menuItems: NavbarVerticalItem[] = [
+    {
+      type: 'router-link',
+      label: 'Home',
+      id: 'home',
+      icon: 'element-home',
+      routerLink: 'home',
+      badge: 'Text',
+      hideBadgeWhenCollapsed: true
+    },
+    { type: 'header', label: 'Badge Examples' },
+    {
+      type: 'router-link',
+      label: 'Text badge',
+      icon: 'element-info',
+      routerLink: 'text-badge',
+      badge: 'Info',
+      badgeColor: 'info-emphasis'
+    },
+    {
+      type: 'group',
+      label: 'Group with badges',
+      id: 'group-with-badges',
+      icon: 'element-user-group',
+      badge: 6,
+      badgeColor: 'critical-emphasis',
+      children: [
+        {
+          type: 'router-link',
+          label: 'Sub item critical',
+          routerLink: 'sub-badge-1',
+          badge: 1,
+          badgeColor: 'critical-emphasis'
+        },
+        {
+          type: 'router-link',
+          label: 'Sub item info',
+          routerLink: 'sub-badge-2',
+          badge: 2,
+          badgeColor: 'info'
+        },
+        {
+          type: 'router-link',
+          label: 'Sub item warning',
+          routerLink: 'sub-badge-3',
+          badge: 3,
+          badgeColor: 'warning'
+        }
+      ]
+    },
+    {
+      type: 'group',
+      label: 'Group item',
+      icon: 'element-special-object',
+      children: [
+        {
+          type: 'router-link',
+          label: 'Sub item',
+          routerLink: 'sub-badge-4'
+        },
+        {
+          type: 'router-link',
+          label: 'Sub item',
+          routerLink: 'sub-badge-5'
+        },
+        {
+          type: 'router-link',
+          label: 'Sub item',
+          routerLink: 'sub-badge-6'
+        }
+      ]
+    },
+    { type: 'divider' },
+    {
+      type: 'router-link',
+      label: 'Subtle badge',
+      icon: 'element-checked',
+      routerLink: 'success',
+      badge: 5,
+      badgeColor: 'success'
+    },
+    {
+      type: 'router-link',
+      label: 'Danger emphasis badge',
+      icon: 'element-warning',
+      routerLink: 'danger',
+      badge: 100,
+      badgeColor: 'danger-emphasis'
+    }
+  ];
+
+  private activeRoute = inject(ActivatedRoute);
+  private router = inject(Router);
+  logEvent = inject(LOG_EVENT);
+
+  ngOnInit(): void {
+    this.router.navigate(['home'], { relativeTo: this.activeRoute });
+  }
+}
diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical-legacy.ts b/src/app/examples/si-navbar-vertical/si-navbar-vertical-legacy.ts
index e343baa8e..28e2746e5 100644
--- a/src/app/examples/si-navbar-vertical/si-navbar-vertical-legacy.ts
+++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical-legacy.ts
@@ -24,13 +24,7 @@ export class SampleComponent {
       link: 'Home',
       tooltip: 'Home',
       items: [
-        {
-          title: 'Sub Item',
-          link: 'subItem',
-          tooltip: 'Sub Item 1',
-          badge: 4,
-          badgeColor: 'warning'
-        },
+        { title: 'Sub Item', link: 'subItem', tooltip: 'Sub Item 1' },
         { title: 'Sub Item 2', link: 'subItem2', tooltip: 'Sub Item 2' },
         { title: 'Sub Item 3', link: 'subItem3', tooltip: 'Sub Item 3' }
       ]
@@ -40,10 +34,30 @@ export class SampleComponent {
       id: 'documentation',
       icon: 'element-document',
       tooltip: 'Documentation',
+      badge: 6,
+      badgeColor: 'critical-emphasis',
       items: [
-        { title: 'Sub Item 4', link: 'subItem4', tooltip: 'Sub Item 4' },
-        { title: 'Sub Item 5', link: 'subItem5', tooltip: 'Sub Item 5' },
-        { title: 'Sub Item 6', link: 'subItem6', tooltip: 'Sub Item 6' }
+        {
+          title: 'Sub Item 4',
+          link: 'subItem4',
+          tooltip: 'Sub Item 4',
+          badge: 1,
+          badgeColor: 'critical-emphasis'
+        },
+        {
+          title: 'Sub Item 5',
+          link: 'subItem5',
+          tooltip: 'Sub Item 5',
+          badge: 2,
+          badgeColor: 'info'
+        },
+        {
+          title: 'Sub Item 6',
+          link: 'subItem6',
+          tooltip: 'Sub Item 6',
+          badge: 3,
+          badgeColor: 'warning'
+        }
       ]
     },
     {
@@ -56,9 +70,7 @@ export class SampleComponent {
       title: 'Test Coverage',
       icon: 'element-diagnostic',
       link: 'coverage',
-      tooltip: 'Test Coverage',
-      badge: 4,
-      badgeColor: 'danger'
+      tooltip: 'Test Coverage'
     }
   ];
 
diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical-routing.ts b/src/app/examples/si-navbar-vertical/si-navbar-vertical-routing.ts
index 53583d2b8..aed20968f 100644
--- a/src/app/examples/si-navbar-vertical/si-navbar-vertical-routing.ts
+++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical-routing.ts
@@ -21,6 +21,12 @@ import { provideExampleRoutes } from '@siemens/live-preview';
 })
 export class HomeComponent {}
 
+@Component({
+  selector: 'app-menu-item',
+  template: `This is a sample menu item page`
+})
+export class MenuItemComponent {}
+
 @Component({
   selector: 'app-energy',
   template: `Energy consumption`
@@ -62,6 +68,10 @@ export const ROUTES: Route[] = [
     path: 'home',
     component: HomeComponent
   },
+  {
+    path: 'menu-item',
+    component: MenuItemComponent
+  },
   { path: 'energy', component: EnergyComponent },
   {
     path: 'coverage',
@@ -100,20 +110,27 @@ export class SampleComponent implements OnInit {
       icon: 'element-home',
       routerLink: 'home'
     },
+    {
+      type: 'router-link',
+      label: 'Test coverage',
+      icon: 'element-diagnostic',
+      routerLink: 'coverage',
+      badge: 'Text',
+      badgeColor: 'danger-emphasis'
+    },
     { type: 'header', label: 'Modules' },
     {
       type: 'router-link',
-      label: 'Energy & sustainability',
-      icon: 'element-trend',
-      routerLink: 'energy'
+      label: 'Emergencies',
+      id: 'menu-item',
+      icon: 'element-fire',
+      routerLink: 'menu-item'
     },
     {
       type: 'router-link',
-      label: 'Test coverage',
-      icon: 'element-diagnostic',
-      routerLink: 'coverage',
-      badge: 4,
-      badgeColor: 'danger'
+      label: 'Energy & sustainability',
+      icon: 'element-trend',
+      routerLink: 'energy'
     }
   ];
 
diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts b/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts
index 045d3c467..74f8b0d8c 100644
--- a/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts
+++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts
@@ -50,9 +50,7 @@ export class SampleComponent implements OnInit {
         {
           type: 'router-link',
           label: 'Sub item',
-          routerLink: 'subItem',
-          badge: 4,
-          badgeColor: 'warning'
+          routerLink: 'subItem'
         },
         { type: 'router-link', label: 'Sub item 2', routerLink: 'subItem2' },
         { type: 'router-link', label: 'Sub item 3', routerLink: 'subItem3' }
@@ -62,9 +60,7 @@ export class SampleComponent implements OnInit {
       type: 'router-link',
       label: 'Test coverage',
       icon: 'element-diagnostic',
-      routerLink: 'coverage',
-      badge: 4,
-      badgeColor: 'danger'
+      routerLink: 'coverage'
     },
     { type: 'divider' },
     {

From 20f45e833b5a83c148f8ae068f5b2ce11d752468 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@siemens.com>
Date: Fri, 30 Jan 2026 17:15:42 +0100
Subject: [PATCH 2/2] refactor(navbar-vertical): use native CSS animations

---
 .../si-navbar-vertical-header.component.scss  | 45 ++++++++++++++++++-
 .../si-navbar-vertical-header.component.ts    | 34 +++-----------
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.scss
index ecfae6776..ef4eba6b3 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.scss
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.scss
@@ -1,12 +1,55 @@
 @use '@siemens/element-theme/src/styles/variables';
 @use 'sass:map';
 
+$transition-duration: variables.element-transition-duration(0.25s);
+
+%fade-transition {
+  opacity: 1;
+  transition: opacity $transition-duration $transition-duration ease-out;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
 :host {
   display: flex;
   align-items: center;
+  block-size: 40px;
+  transition: block-size variables.$element-default-transition-duration ease-out;
+
+  &.collapsed {
+    block-size: 13px;
+  }
+
+  // Prevents initial animation on component load
+  &.component-enter {
+    transition: none;
+
+    .title,
+    .divider {
+      transition: none;
+    }
+  }
+}
+
+.title {
+  @extend %fade-transition;
+
+  &.title-leave {
+    opacity: 0;
+    transition: opacity $transition-duration ease-in;
+  }
 }
 
-si-navbar-vertical-divider {
+.divider {
+  @extend %fade-transition;
+
   flex: 1;
   margin-block: 0;
+
+  &.divider-leave {
+    opacity: 0;
+    transition: none;
+  }
 }
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.ts
index 1d2101bbe..d1cc73cdf 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-header.component.ts
@@ -2,7 +2,6 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { animate, group, query, state, style, transition, trigger } from '@angular/animations';
 import { Component, inject } from '@angular/core';
 
 import { SiNavbarVerticalDividerComponent } from './si-navbar-vertical-divider.component';
@@ -13,39 +12,18 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider';
   imports: [SiNavbarVerticalDividerComponent],
   template: `
     @if (!navbar.collapsed()) {
-      <div class="si-h5 text-secondary p-5">
+      <div class="title si-h5 text-secondary text-truncate p-5" animate.leave="title-leave">
         <ng-content />
       </div>
     } @else {
-      <si-navbar-vertical-divider />
+      <si-navbar-vertical-divider class="divider" animate.leave="divider-leave" />
     }
   `,
   styleUrl: './si-navbar-vertical-header.component.scss',
-  host: { '[@headerCollapse]': 'navbar.collapsed()' },
-  animations: [
-    trigger('headerCollapse', [
-      // Prevents initial animation. See: https://stackoverflow.com/a/50791299
-      transition(':enter', []),
-      state('true', style({ blockSize: '13px' })),
-      state('false', style({ blockSize: '40px' })),
-      transition('* <=> *', [
-        query('.si-h5', style({ position: 'absolute' }), { optional: true }),
-        group([
-          query(
-            ':leave',
-            [style({ opacity: '1' }), animate('0.2s ease-in', style({ opacity: '0' }))],
-            { optional: true }
-          ),
-          query(
-            ':enter',
-            [style({ opacity: '0' }), animate('0.2s 0.3s ease-out', style({ opacity: '1' }))],
-            { optional: true }
-          ),
-          animate('0.5s ease')
-        ])
-      ])
-    ])
-  ]
+  host: {
+    '[class.collapsed]': 'navbar.collapsed()',
+    'animate.enter': 'component-enter'
+  }
 })
 export class SiNavbarVerticalHeaderComponent {
   protected navbar = inject(SI_NAVBAR_VERTICAL);