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 955ccb8878..d01e6cda38 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>
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 ea3d5c45a2..7fcb154cbf 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,10 +1,15 @@
 import { Type } from '@angular/core';
 
-export interface NavItem {
+export class NavItem {
   id: string | number;
   component?: Type<any>;
   html?: string;
   action?: () => void;
   order?: number;
   requiredPolicy?: string;
+  visible?: () => boolean;
+  constructor(props: Partial<NavItem>) {
+    props = { ...props, visible: props.visible || (() => true) };
+    Object.assign(this, props);
+  }
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/nav-items.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/nav-items.service.ts
index 874fc4b6e3..ca361a2940 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/nav-items.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/nav-items.service.ts
@@ -14,30 +14,31 @@ export class NavItemsService {
     return this._items$.asObservable();
   }
 
-  addItems(items: NavItem[]) {
-    this._items$.next([...this.items, ...items].sort(sortItems));
+  addItems(newItems: NavItem[]) {
+    const items = [...this.items];
+    newItems.forEach(item => items.push(new NavItem(item)));
+    items.sort(sortItems);
+    this._items$.next(items);
   }
 
   removeItem(id: string | number) {
     const index = this.items.findIndex(item => item.id === id);
 
-    if (index > -1) {
-      this._items$.next([...this.items.slice(0, index), ...this.items.slice(index + 1)]);
-    }
+    if (index < 0) return;
+
+    const items = [...this.items.slice(0, index), ...this.items.slice(index + 1)];
+    this._items$.next(items);
   }
 
   patchItem(id: string | number, item: Partial<Omit<NavItem, 'id'>>) {
     const index = this.items.findIndex(i => i.id === id);
 
-    if (index > -1) {
-      this._items$.next(
-        [
-          ...this.items.slice(0, index),
-          { ...this.items[index], ...item },
-          ...this.items.slice(index + 1),
-        ].sort(sortItems),
-      );
-    }
+    if (index < 0) return;
+
+    const items = [...this.items];
+    items[index] = new NavItem({ ...items[index], ...item });
+    items.sort(sortItems);
+    this._items$.next(items);
   }
 }