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 955ccb88781..d01e6cda38f 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,16 +1,18 @@
 <ul class="navbar-nav">
-  <li
-    class="nav-item d-flex align-items-center"
-    *ngFor="let item of navItems.items$ | async; trackBy: trackByFn"
-    [abpPermission]="item.requiredPolicy"
-  >
-    <ng-container
-      *ngIf="item.component; else htmlTemplate"
-      [ngComponentOutlet]="item.component"
-    ></ng-container>
+  <ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn">
+    <li
+      class="nav-item d-flex align-items-center"
+      *ngIf="item.visible()"
+      [abpPermission]="item.requiredPolicy"
+    >
+      <ng-container
+        *ngIf="item.component; else htmlTemplate"
+        [ngComponentOutlet]="item.component"
+      ></ng-container>
 
-    <ng-template #htmlTemplate>
-      <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
-    </ng-template>
-  </li>
+      <ng-template #htmlTemplate>
+        <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
+      </ng-template>
+    </li>
+  </ng-container>
 </ul>