From 738df45f38eaeb9f561eb53b72d618a5479e90c0 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Mon, 5 Jan 2026 11:07:37 +0100
Subject: [PATCH] Add input for forcing active state on group & disable toggle
 (#18043)

---
 .../src/navigation/nav-group.component.html   |  1 +
 .../src/navigation/nav-group.component.ts     |  8 +++++++-
 .../src/navigation/nav-group.stories.ts       | 20 +++++++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html
index a5cb1d5a6b9..1790fea179a 100644
--- a/libs/components/src/navigation/nav-group.component.html
+++ b/libs/components/src/navigation/nav-group.component.html
@@ -14,6 +14,7 @@
     [ariaLabel]="ariaLabel()"
     [hideActiveStyles]="parentHideActiveStyles()"
     [ariaCurrentWhenActive]="ariaCurrent()"
+    [forceActiveStyles]="forceActiveStyles()"
   >
     <ng-template #button>
       <button
diff --git a/libs/components/src/navigation/nav-group.component.ts b/libs/components/src/navigation/nav-group.component.ts
index 5797d34da5d..3e584c855ef 100644
--- a/libs/components/src/navigation/nav-group.component.ts
+++ b/libs/components/src/navigation/nav-group.component.ts
@@ -92,6 +92,12 @@ export class NavGroupComponent extends NavBaseComponent {
    */
   readonly hideIfEmpty = input(false, { transform: booleanAttribute });
 
+  /** Forces active styles to be shown, regardless of the `routerLinkActiveOptions` */
+  readonly forceActiveStyles = input(false, { transform: booleanAttribute });
+
+  /** Does not toggle the expanded state on click */
+  readonly disableToggleOnClick = input(false, { transform: booleanAttribute });
+
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output()
@@ -129,7 +135,7 @@ export class NavGroupComponent extends NavBaseComponent {
         this.sideNavService.setOpen();
       }
       this.open.set(true);
-    } else {
+    } else if (!this.disableToggleOnClick()) {
       this.toggle();
     }
     this.mainContentClicked.emit();
diff --git a/libs/components/src/navigation/nav-group.stories.ts b/libs/components/src/navigation/nav-group.stories.ts
index fa1cb06dbfe..04b282c1bab 100644
--- a/libs/components/src/navigation/nav-group.stories.ts
+++ b/libs/components/src/navigation/nav-group.stories.ts
@@ -168,3 +168,23 @@ export const Tree: StoryObj<NavGroupComponent> = {
     `,
   }),
 };
+
+export const ForcedActive: StoryObj<NavGroupComponent> = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-side-nav>
+        <bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter" [hideIfEmpty]="hideIfEmpty">
+          <bit-nav-item text="Child A" route="a" icon="bwi-filter" *ngIf="renderChildren"></bit-nav-item>
+          <bit-nav-item text="Child B" route="b" *ngIf="renderChildren"></bit-nav-item>
+          <bit-nav-item text="Child C" route="c" icon="bwi-filter" *ngIf="renderChildren"></bit-nav-item>
+        </bit-nav-group>
+        <bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter" forceActiveStyles disableToggleOnClick>
+          <bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
+          <bit-nav-item text="Child B"></bit-nav-item>
+          <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
+        </bit-nav-group>
+      </bit-side-nav>
+    `,
+  }),
+};