siemens · dauriamarco · Feb 12, 2026
@@ -9,6 +9,7 @@ import {
   ComponentRef,
   computed,
   Directive,
+  ElementRef,
   EmbeddedViewRef,
   HostListener,
   inject,
@@ -74,6 +75,7 @@ export class SiNavbarVerticalGroupTriggerDirective implements OnInit {
   readonly active = signal(false);
 
   protected readonly navbar = inject(SI_NAVBAR_VERTICAL);
+  private readonly elementRef = inject(ElementRef);
 
   private flyoutOutsideClickSubscription?: Subscription;
   private readonly viewContainer = inject(ViewContainerRef);
@@ -103,10 +105,12 @@ export class SiNavbarVerticalGroupTriggerDirective implements OnInit {
   hideFlyout(): void {
     if (this.flyout()) {
       this.flyout.set(false);
+      this.active.set(false);
       this.flyoutAnchorComponentRef?.destroy();
       this.flyoutAnchorComponentRef = undefined;
       this.attachInline();
       this.flyoutOutsideClickSubscription?.unsubscribe();
+      this.elementRef.nativeElement.focus();
     }
   }
 

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { Component, computed, HostListener, inject } from '@angular/core';
+import { Component, computed, effect, HostListener, inject, viewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLinkActive } from '@angular/router';
 
@@ -19,7 +19,6 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider';
       [class.inline-group]="!flyout"
       [class.dropdown-menu]="flyout"
       [cdkTrapFocus]="flyout"
-      [cdkTrapFocusAutoCapture]="flyout"
     >
       <div [class.overflow-hidden]="!flyout">
         <ng-content />
@@ -38,6 +37,7 @@ export class SiNavbarVerticalGroupComponent {
   protected readonly navbar = inject(SI_NAVBAR_VERTICAL);
   protected readonly groupTrigger = inject(SiNavbarVerticalGroupTriggerDirective);
   private readonly routerLinkActive = inject(RouterLinkActive, { optional: true });
+  private readonly focusTrap = viewChild(CdkTrapFocus);
 
   // Store initial value, as the mode for an instance never changes.
   protected flyout = this.groupTrigger.flyout();
@@ -50,6 +50,12 @@ export class SiNavbarVerticalGroupComponent {
     this.routerLinkActive?.isActiveChange
       .pipe(takeUntilDestroyed())
       .subscribe(active => this.groupTrigger.active.set(active));
+
+    effect(() => {
+      if (this.visible()) {
+        this.focusTrap()?.focusTrap.focusFirstTabbableElementWhenReady();
+      }
+    });
   }
 
   @HostListener('keydown.escape') protected close(): void {

@@ -6,6 +6,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  ElementRef,
   HostListener,
   inject,
   input,
@@ -65,7 +66,7 @@ export class SiNavbarVerticalItemComponent implements OnInit {
   });
   private readonly routerLinkActive = inject(RouterLinkActive, { optional: true });
   private readonly siLink = inject(SiLinkDirective, { optional: true });
-
+  private readonly elementRef = inject(ElementRef);
   /**
    * Hides the badge in collapsed state
    */
@@ -108,6 +109,7 @@ export class SiNavbarVerticalItemComponent implements OnInit {
       return;
     }
     this.parent?.group?.hideFlyout();
+    this.elementRef.nativeElement.focus();
     if (!this.group) {
       this.navbar.itemTriggered();
     }

@@ -82,10 +82,7 @@ export class SampleComponent implements OnInit {
       label: 'Action',
       icon: 'element-warning',
       active: false,
-      action: item => {
-        item.active = true;
-        this.logEvent('Callback for action called');
-      }
+      action: () => this.logEvent('Callback for action called')
     }
   ];