diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
index 2b1949a0eb..4e73007ad2 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
@@ -1,17 +1,13 @@
 <ul class="navbar-nav">
   <ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn">
-    <ng-container *ngIf="item.visible && item.visible()">
+    <ng-container *ngIf="item.visible && item.visible() && (item.visible$ | async)">
       <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
-        <ng-container
-          *ngIf="item.component; else htmlTemplate"
-          [ngComponentOutlet]="item.component"
-          [ngComponentOutletInjector]="item | toInjector"
-        ></ng-container>
-
+        <ng-container *ngIf="item.component; else htmlTemplate" [ngComponentOutlet]="item.component"
+          [ngComponentOutletInjector]="item | toInjector"></ng-container>
         <ng-template #htmlTemplate>
           <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
         </ng-template>
       </li>
     </ng-container>
   </ng-container>
-</ul>
+</ul>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts b/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts
index 62ccf32ff3..ce1bf31518 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/models/nav-item.ts
@@ -1,4 +1,5 @@
 import { Type } from '@angular/core';
+import { Observable, of } from 'rxjs';
 
 export class NavItem {
   id?: string | number;
@@ -8,8 +9,13 @@ export class NavItem {
   order?: number;
   requiredPolicy?: string;
   visible?: () => boolean;
+  visible$?: Observable<boolean>;
   constructor(props: Partial<NavItem>) {
-    props = { ...props, visible: props.visible || (() => true) };
+    props = {
+      ...props,
+      visible: props.visible || (() => true),
+      visible$: props.visible$ || of(true),
+    };
     Object.assign(this, props);
   }
 }