diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html
index 3484c452a0..8dab9ea8fd 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html
@@ -32,7 +32,7 @@
     [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
   >
     <ng-container *ngFor="let item of userMenu.items$ | async; trackBy: trackByFn">
-      <ng-container *ngIf="item.visible && item.visible()">
+      <ng-container *abpVisible="!item.visible || item.visible(item)">
         <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
           <ng-container
             *ngIf="item.component; else htmlTemplate"
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 1cc5a4370f..67db85efd4 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,9 +1,9 @@
 <ul class="navbar-nav">
   <ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn">
-    <ng-container *ngIf="item.visible && item.visible() && (item.visible$ | async)">
+    <ng-container  *abpVisible="!item.visible || item.visible(item)">
       <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"
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 ce1bf31518..706eb1cb6c 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,4 @@
-import { Type } from '@angular/core';
+import { Injector, Type } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 export class NavItem {
@@ -8,14 +8,13 @@ export class NavItem {
   action?: () => void;
   order?: number;
   requiredPolicy?: string;
-  visible?: () => boolean;
-  visible$?: Observable<boolean>;
+  visible?: NavBarPropPredicate<NavItem>;
   constructor(props: Partial<NavItem>) {
-    props = {
-      ...props,
-      visible: props.visible || (() => true),
-      visible$: props.visible$ || of(true),
-    };
     Object.assign(this, props);
   }
 }
+
+export type NavBarPropPredicate<T> = (
+  prop?: T,
+  injector?: Injector,
+) => boolean | Promise<boolean> | Observable<boolean>;