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 ea708fdde6..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,6 +1,6 @@
 import { Type } from '@angular/core';
 
-export interface NavItem {
+export class NavItem {
   id: string | number;
   component?: Type<any>;
   html?: string;
@@ -8,4 +8,8 @@ export interface NavItem {
   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 92b7c26059..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,37 +14,31 @@ export class NavItemsService {
     return this._items$.asObservable();
   }
 
-  addItems(items: NavItem[]) {
-    this._items$.next(
-      [
-        ...this.items,
-        ...items.map(item =>
-          typeof item.visible === 'undefined' ? { ...item, visible: () => true } : item,
-        ),
-      ].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);
   }
 }