diff --git a/src/app/core/facades/shopping.facade.ts b/src/app/core/facades/shopping.facade.ts
index 7bb5b68c805..5b332393e80 100644
--- a/src/app/core/facades/shopping.facade.ts
+++ b/src/app/core/facades/shopping.facade.ts
@@ -6,7 +6,12 @@ import { debounce, debounceTime, filter, map, switchMap, tap } from 'rxjs/operat
 import { ProductListingID } from 'ish-core/models/product-listing/product-listing.model';
 import { ProductCompletenessLevel, ProductHelper } from 'ish-core/models/product/product.model';
 import { addProductToBasket } from 'ish-core/store/customer/basket';
-import { getCategoryLoading, getSelectedCategory, getTopLevelCategories } from 'ish-core/store/shopping/categories';
+import {
+  getCategory,
+  getCategoryLoading,
+  getNavigationCategories,
+  getSelectedCategory,
+} from 'ish-core/store/shopping/categories';
 import {
   addToCompare,
   getCompareProducts,
@@ -50,10 +55,17 @@ export class ShoppingFacade {
 
   // CATEGORY
 
-  topLevelCategories$ = this.store.pipe(select(getTopLevelCategories));
   selectedCategory$ = this.store.pipe(select(getSelectedCategory));
   selectedCategoryLoading$ = this.store.pipe(select(getCategoryLoading), debounceTime(500));
 
+  category$(uniqueId: string) {
+    return this.store.pipe(select(getCategory(uniqueId)));
+  }
+
+  navigationCategories$(uniqueId?: string) {
+    return this.store.pipe(select(getNavigationCategories(uniqueId)));
+  }
+
   // PRODUCT
 
   selectedProduct$ = this.store.pipe(select(getSelectedProduct));
diff --git a/src/app/core/models/category-tree/category-tree.helper.spec.ts b/src/app/core/models/category-tree/category-tree.helper.spec.ts
index fff792d2925..05c1560cabc 100644
--- a/src/app/core/models/category-tree/category-tree.helper.spec.ts
+++ b/src/app/core/models/category-tree/category-tree.helper.spec.ts
@@ -5,6 +5,7 @@ import * as using from 'jasmine-data-provider';
 import { CategoryData } from 'ish-core/models/category/category.interface';
 import { CategoryMapper } from 'ish-core/models/category/category.mapper';
 import { Category } from 'ish-core/models/category/category.model';
+import { categoryTree } from 'ish-core/utils/dev/test-data-utils';
 
 import { CategoryTreeHelper } from './category-tree.helper';
 import { CategoryTree } from './category-tree.model';
@@ -458,4 +459,188 @@ describe('Category Tree Helper', () => {
       }
     );
   });
+
+  describe('subTree', () => {
+    let combined: CategoryTree;
+
+    beforeEach(() => {
+      combined = categoryTree([
+        { uniqueId: 'A', categoryPath: ['A'] },
+        { uniqueId: 'A.1', categoryPath: ['A', 'A.1'] },
+        { uniqueId: 'A.1.a', categoryPath: ['A', 'A.1', 'A.1.a'] },
+        { uniqueId: 'A.2', categoryPath: ['A', 'A.2'] },
+        { uniqueId: 'A.1.b', categoryPath: ['A', 'A.1', 'A.1.b'] },
+        { uniqueId: 'B', categoryPath: ['B'] },
+        { uniqueId: 'B.1', categoryPath: ['B', 'B.1'] },
+        { uniqueId: 'B.1.a', categoryPath: ['B', 'B.1', 'B.1.a'] },
+        { uniqueId: 'B.2', categoryPath: ['B', 'B.2'] },
+      ] as Category[]);
+    });
+
+    it('should be created', () => {
+      expect(combined).toMatchInlineSnapshot(`
+        ├─ A
+        │  ├─ A.1
+        │  │  ├─ A.1.a
+        │  │  └─ A.1.b
+        │  └─ A.2
+        └─ B
+           ├─ B.1
+           │  └─ B.1.a
+           └─ B.2
+
+      `);
+
+      expect(combined.rootIds).toMatchInlineSnapshot(`
+        Array [
+          "A",
+          "B",
+        ]
+      `);
+      expect(Object.keys(combined.nodes)).toMatchInlineSnapshot(`
+        Array [
+          "A",
+          "A.1",
+          "A.1.a",
+          "A.2",
+          "A.1.b",
+          "B",
+          "B.1",
+          "B.1.a",
+          "B.2",
+        ]
+      `);
+      expect(Object.keys(combined.edges)).toMatchInlineSnapshot(`
+        Array [
+          "A",
+          "A.1",
+          "B",
+          "B.1",
+        ]
+      `);
+    });
+
+    it('should return an empty tree if selected uniqueId is not part of the tree', () => {
+      const tree = CategoryTreeHelper.subTree(combined, 'C');
+      expect(tree.rootIds).toBeEmpty();
+      expect(tree.edges).toBeEmpty();
+      expect(tree.nodes).toBeEmpty();
+    });
+
+    it('should return copy of tree if selector is undefined', () => {
+      const tree = CategoryTreeHelper.subTree(combined, undefined);
+      expect(CategoryTreeHelper.equals(tree, combined)).toBeTrue();
+    });
+
+    it('should extract sub tree for A', () => {
+      const tree = CategoryTreeHelper.subTree(combined, 'A');
+
+      expect(tree).toMatchInlineSnapshot(`
+        └─ A
+           ├─ A.1
+           │  ├─ A.1.a
+           │  └─ A.1.b
+           └─ A.2
+
+      `);
+
+      expect(tree.rootIds).toMatchInlineSnapshot(`
+        Array [
+          "A",
+        ]
+      `);
+      expect(Object.keys(tree.nodes)).toMatchInlineSnapshot(`
+        Array [
+          "A",
+          "A.1",
+          "A.1.a",
+          "A.2",
+          "A.1.b",
+        ]
+      `);
+      expect(Object.keys(tree.edges)).toMatchInlineSnapshot(`
+        Array [
+          "A",
+          "A.1",
+        ]
+      `);
+    });
+
+    it('should extract sub tree for A.1', () => {
+      const tree = CategoryTreeHelper.subTree(combined, 'A.1');
+
+      expect(tree).toMatchInlineSnapshot(`
+        └─ dangling
+           └─ A.1
+              ├─ A.1.a
+              └─ A.1.b
+
+      `);
+
+      expect(tree.rootIds).toBeEmpty();
+      expect(Object.keys(tree.nodes)).toMatchInlineSnapshot(`
+        Array [
+          "A.1",
+          "A.1.a",
+          "A.1.b",
+        ]
+      `);
+      expect(Object.keys(tree.edges)).toMatchInlineSnapshot(`
+        Array [
+          "A.1",
+        ]
+      `);
+    });
+
+    it('should extract sub tree for A.1.a', () => {
+      const tree = CategoryTreeHelper.subTree(combined, 'A.1.a');
+
+      expect(tree).toMatchInlineSnapshot(`
+        └─ dangling
+           └─ A.1.a
+
+      `);
+
+      expect(tree.rootIds).toBeEmpty();
+      expect(Object.keys(tree.nodes)).toMatchInlineSnapshot(`
+        Array [
+          "A.1.a",
+        ]
+      `);
+      expect(Object.keys(tree.edges)).toBeEmpty();
+    });
+  });
+
+  describe('equals', () => {
+    const catA = { uniqueId: 'A', categoryPath: ['A'] } as Category;
+    const catB = { uniqueId: 'B', categoryPath: ['B'] } as Category;
+
+    it('should return true for simple equal trees', () => {
+      const tree1 = categoryTree([catA]);
+      const tree2 = categoryTree([catA]);
+
+      expect(CategoryTreeHelper.equals(tree1, tree2)).toBeTrue();
+    });
+
+    it('should return true if category was copied', () => {
+      const tree1 = categoryTree([catA]);
+      const tree2 = categoryTree([{ ...catA }]);
+
+      expect(CategoryTreeHelper.equals(tree1, tree2)).toBeTrue();
+    });
+
+    it('should return false for simple unequal trees', () => {
+      const tree1 = categoryTree([catA]);
+      const tree2 = categoryTree([catB]);
+
+      expect(CategoryTreeHelper.equals(tree1, tree2)).toBeFalse();
+    });
+
+    it('should return true for simple unordered trees', () => {
+      const tree1 = categoryTree([catA, catB]);
+      const tree2 = categoryTree([catB, catA]);
+
+      expect(CategoryTreeHelper.equals(tree1, tree2)).toBeTrue();
+    });
+  });
 });
diff --git a/src/app/core/models/category-tree/category-tree.helper.ts b/src/app/core/models/category-tree/category-tree.helper.ts
index 18f72365393..a61ce3a13e7 100644
--- a/src/app/core/models/category-tree/category-tree.helper.ts
+++ b/src/app/core/models/category-tree/category-tree.helper.ts
@@ -1,3 +1,5 @@
+import { isEqual, pick } from 'lodash-es';
+
 import { Category } from 'ish-core/models/category/category.model';
 
 import { CategoryTree } from './category-tree.model';
@@ -131,4 +133,51 @@ export class CategoryTreeHelper {
     const singleCategoryTree = CategoryTreeHelper.single(category);
     return CategoryTreeHelper.merge(tree, singleCategoryTree);
   }
+
+  /**
+   * Extract a sub tree.
+   */
+  static subTree(tree: CategoryTree, uniqueId: string): CategoryTree {
+    if (!uniqueId) {
+      return tree;
+    }
+
+    const select = (e: string) => e.startsWith(uniqueId);
+    return {
+      rootIds: tree.rootIds.filter(select),
+      edges: pick(tree.edges, ...Object.keys(tree.edges).filter(select)),
+      nodes: pick(tree.nodes, ...Object.keys(tree.nodes).filter(select)),
+    };
+  }
+
+  private static rootIdsEqual(t1: string[], t2: string[]) {
+    return t1.length === t2.length && t1.every(e => t2.includes(e));
+  }
+
+  private static edgesEqual(t1: { [id: string]: string[] }, t2: { [id: string]: string[] }) {
+    return isEqual(t1, t2);
+  }
+
+  private static categoriesEqual(t1: { [id: string]: Category }, t2: { [id: string]: Category }) {
+    const keys1 = Object.keys(t1);
+    const keys2 = Object.keys(t2);
+    return (
+      keys1.length === keys2.length &&
+      keys1.every(id => keys2.includes(id)) &&
+      keys1.every(id => isEqual(t1[id], t2[id]))
+    );
+  }
+
+  /**
+   * Perform check for equality. Order of items is ignored.
+   */
+  static equals(tree1: CategoryTree, tree2: CategoryTree): boolean {
+    return (
+      tree1 &&
+      tree2 &&
+      CategoryTreeHelper.rootIdsEqual(tree1.rootIds, tree2.rootIds) &&
+      CategoryTreeHelper.edgesEqual(tree1.edges, tree2.edges) &&
+      CategoryTreeHelper.categoriesEqual(tree1.nodes, tree2.nodes)
+    );
+  }
 }
diff --git a/src/app/core/models/category-view/category-view.model.spec.ts b/src/app/core/models/category-view/category-view.model.spec.ts
index c5257421d25..7ac7e4402b3 100644
--- a/src/app/core/models/category-view/category-view.model.spec.ts
+++ b/src/app/core/models/category-view/category-view.model.spec.ts
@@ -39,8 +39,8 @@ describe('Category View Model', () => {
     ]);
 
     const view = createCategoryView(tree, '123');
-    expect(view.hasChildren()).toBeFalse();
-    expect(view.children()).toBeEmpty();
+    expect(view.hasChildren).toBeFalse();
+    expect(view.children).toBeEmpty();
   });
 
   const cat1 = {
@@ -60,34 +60,16 @@ describe('Category View Model', () => {
     const tree = categoryTree([cat1, cat11]);
 
     const view = createCategoryView(tree, '123');
-    expect(view.hasChildren()).toBeTrue();
-    expect(view.children()).toHaveLength(1);
+    expect(view.hasChildren).toBeTrue();
+    expect(view.children).toHaveLength(1);
 
-    expect(view.children()[0].uniqueId).toEqual('123.456');
+    expect(view.children[0]).toEqual('123.456');
   });
 
-  it('should provide methods to check if a node in a deep complex tree has children', () => {
-    const tree = categoryTree([cat1, cat11, cat111]);
-
-    const view = createCategoryView(tree, '123');
-    expect(view.hasChildren()).toBeTrue();
-    expect(view.children()).toHaveLength(1);
-
-    const subCategory = view.children()[0];
-    expect(subCategory.uniqueId).toEqual('123.456');
-    expect(subCategory.hasChildren()).toBeTrue();
-    expect(subCategory.children()).toHaveLength(1);
-
-    const subSubCategory = subCategory.children()[0];
-    expect(subSubCategory.uniqueId).toEqual('123.456.789');
-    expect(subSubCategory.hasChildren()).toBeFalse();
-    expect(subSubCategory.children()).toBeEmpty();
-  });
-
-  it('should provide acces to the category path of a category', () => {
+  it('should provide access to the category path of a category', () => {
     const tree = categoryTree([cat1, cat11, cat111]);
     const view = createCategoryView(tree, '123.456.789');
 
-    expect(view.pathCategories().map(v => v.uniqueId)).toEqual(['123', '123.456', '123.456.789']);
+    expect(view.categoryPath).toEqual(['123', '123.456', '123.456.789']);
   });
 });
diff --git a/src/app/core/models/category-view/category-view.model.ts b/src/app/core/models/category-view/category-view.model.ts
index 77700d423f0..81807271fcd 100644
--- a/src/app/core/models/category-view/category-view.model.ts
+++ b/src/app/core/models/category-view/category-view.model.ts
@@ -5,9 +5,8 @@ import { Category } from 'ish-core/models/category/category.model';
  * View on a {@link Category} with additional methods for navigating to sub categories or category path
  */
 export interface CategoryView extends Category {
-  children(): CategoryView[];
-  hasChildren(): boolean;
-  pathCategories(): CategoryView[];
+  children: string[];
+  hasChildren: boolean;
 }
 
 export function createCategoryView(tree: CategoryTree, uniqueId: string): CategoryView {
@@ -20,8 +19,7 @@ export function createCategoryView(tree: CategoryTree, uniqueId: string): Catego
 
   return {
     ...tree.nodes[uniqueId],
-    hasChildren: () => !!tree.edges[uniqueId] && !!tree.edges[uniqueId].length,
-    children: () => (tree.edges[uniqueId] || []).map(id => createCategoryView(tree, id)),
-    pathCategories: () => tree.nodes[uniqueId].categoryPath.map(id => createCategoryView(tree, id)),
+    children: tree.edges[uniqueId] || [],
+    hasChildren: !!tree.edges[uniqueId] && !!tree.edges[uniqueId].length,
   };
 }
diff --git a/src/app/core/models/category/category.helper.spec.ts b/src/app/core/models/category/category.helper.spec.ts
index a7b2b7c8e56..8a689077a6a 100644
--- a/src/app/core/models/category/category.helper.spec.ts
+++ b/src/app/core/models/category/category.helper.spec.ts
@@ -4,38 +4,6 @@ import { CategoryCompletenessLevel, CategoryHelper } from './category.helper';
 import { Category } from './category.model';
 
 describe('Category Helper', () => {
-  describe('equals', () => {
-    const dataProvider = () => {
-      const emptyCategory = {} as Category;
-      const category1 = { uniqueId: '1' } as Category;
-      const category2 = { uniqueId: '2' } as Category;
-      const category3 = { name: 'dummy', uniqueId: '1' } as Category;
-      const category4 = { name: 'other', uniqueId: '1' } as Category;
-      const category5 = { name: 'd', uniqueId: '0' } as Category;
-      return [
-        { cat1: emptyCategory, cat2: undefined, result: false },
-        { cat1: emptyCategory, cat2: undefined, result: false },
-        { cat1: emptyCategory, cat2: emptyCategory, result: true },
-        { cat1: category1, cat2: category1, result: true },
-        { cat1: category2, cat2: category1, result: false },
-        { cat1: emptyCategory, cat2: category1, result: false },
-        { cat1: category1, cat2: emptyCategory, result: false },
-        { cat1: category5, cat2: category1, result: false },
-        { cat1: category1, cat2: category5, result: false },
-        { cat1: category1, cat2: category3, result: true },
-        { cat1: category3, cat2: category4, result: true },
-      ];
-    };
-
-    using(dataProvider, slice => {
-      it(`should return ${slice.result} when comparing '${JSON.stringify(slice.cat1)}' and '${JSON.stringify(
-        slice.cat2
-      )}'`, () => {
-        expect(CategoryHelper.equals(slice.cat1, slice.cat2)).toBe(slice.result);
-      });
-    });
-  });
-
   describe('getCategoryPath', () => {
     function dataProvider() {
       return [
diff --git a/src/app/core/models/category/category.helper.ts b/src/app/core/models/category/category.helper.ts
index 3e2249f7e23..920ac4d7bf5 100644
--- a/src/app/core/models/category/category.helper.ts
+++ b/src/app/core/models/category/category.helper.ts
@@ -7,16 +7,6 @@ export enum CategoryCompletenessLevel {
 export class CategoryHelper {
   static uniqueIdSeparator = '.';
 
-  /**
-   * @returns          True if the categories are equal, false if not.
-   *                   'equal' means
-   *                   - both categories are defined
-   *                   - the uniqueId of the categories is the same
-   */
-  static equals(self: Category, category: Category): boolean {
-    return !!self && !!category && self.uniqueId === category.uniqueId;
-  }
-
   /**
    * Converts a given uniqueId of a category in a REST API category path.
    * @example
diff --git a/src/app/core/models/navigation-category/navigation-category.model.ts b/src/app/core/models/navigation-category/navigation-category.model.ts
new file mode 100644
index 00000000000..acfa218dbfe
--- /dev/null
+++ b/src/app/core/models/navigation-category/navigation-category.model.ts
@@ -0,0 +1,6 @@
+export interface NavigationCategory {
+  uniqueId: string;
+  name: string;
+  url: string;
+  hasChildren: boolean;
+}
diff --git a/src/app/core/store/shopping/categories/categories.selectors.spec.ts b/src/app/core/store/shopping/categories/categories.selectors.spec.ts
index af2081be01c..c06ef8cbfd9 100644
--- a/src/app/core/store/shopping/categories/categories.selectors.spec.ts
+++ b/src/app/core/store/shopping/categories/categories.selectors.spec.ts
@@ -20,10 +20,11 @@ import {
 } from './categories.actions';
 import {
   getBreadcrumbForCategoryPage,
+  getCategory,
   getCategoryEntities,
   getCategoryLoading,
+  getNavigationCategories,
   getSelectedCategory,
-  getTopLevelCategories,
   isTopLevelCategoriesLoaded,
 } from './categories.selectors';
 
@@ -75,10 +76,10 @@ describe('Categories Selectors', () => {
 
     it('should not select any selected category when used', () => {
       expect(getSelectedCategory(store$.state)).toBeUndefined();
+      expect(getCategory(catA.uniqueId)(store$.state)).toBeUndefined();
     });
 
-    it('should not select any top level categories when used', () => {
-      expect(getTopLevelCategories(store$.state)).toBeEmpty();
+    it('should not have any top level categories loaded when used', () => {
       expect(isTopLevelCategoriesLoaded(store$.state)).toBeFalse();
     });
   });
@@ -125,6 +126,7 @@ describe('Categories Selectors', () => {
       it('should return the category information when used', () => {
         expect(getCategoryEntities(store$.state)).toHaveProperty(catA.uniqueId);
         expect(getCategoryLoading(store$.state)).toBeFalse();
+        expect(getCategory(catA.uniqueId)(store$.state).uniqueId).toEqual(catA.uniqueId);
       });
 
       it('should not select the irrelevant category when used', () => {
@@ -145,6 +147,7 @@ describe('Categories Selectors', () => {
       it('should return the category information when used', () => {
         expect(getCategoryEntities(store$.state)).toHaveProperty(catA.uniqueId);
         expect(getCategoryLoading(store$.state)).toBeFalse();
+        expect(getCategory(catA.uniqueId)(store$.state).uniqueId).toEqual(catA.uniqueId);
       });
 
       it('should select the selected category when used', () => {
@@ -192,22 +195,80 @@ describe('Categories Selectors', () => {
 
   describe('loading top level categories', () => {
     beforeEach(() => {
-      store$.dispatch(
-        loadTopLevelCategoriesSuccess({
-          categories: categoryTree([
-            { uniqueId: 'A', categoryPath: ['A'] },
-            { uniqueId: 'B', categoryPath: ['B'] },
-          ] as Category[]),
-        })
-      );
-    });
-
-    it('should select root categories when used', () => {
-      expect(getTopLevelCategories(store$.state).map(x => x.uniqueId)).toEqual(['A', 'B']);
+      const cA = { name: 'name_A', uniqueId: 'A', categoryPath: ['A'] } as Category;
+      const cA1 = { name: 'name_A.1', uniqueId: 'A.1', categoryPath: ['A', 'A.1'] } as Category;
+      const cA1a = { name: 'name_A.1.a', uniqueId: 'A.1.a', categoryPath: ['A', 'A.1', 'A.1.a'] } as Category;
+      const cA1b = { name: 'name_A.1.b', uniqueId: 'A.1.b', categoryPath: ['A', 'A.1', 'A.1.b'] } as Category;
+      const cA2 = { name: 'name_A.2', uniqueId: 'A.2', categoryPath: ['A', 'A.2'] } as Category;
+      const cB = { name: 'name_B', uniqueId: 'B', categoryPath: ['B'] } as Category;
+      store$.dispatch(loadTopLevelCategoriesSuccess({ categories: categoryTree([cA, cA1, cA1a, cA1b, cA2, cB]) }));
     });
 
     it('should remember if top level categories are loaded', () => {
       expect(isTopLevelCategoriesLoaded(store$.state)).toBeTrue();
     });
+
+    describe('selecting navigation categories', () => {
+      it('should select top level categories when no argument was supplied', () => {
+        expect(getNavigationCategories(undefined)(store$.state)).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "hasChildren": true,
+              "name": "name_A",
+              "uniqueId": "A",
+              "url": "/name_A-catA",
+            },
+            Object {
+              "hasChildren": false,
+              "name": "name_B",
+              "uniqueId": "B",
+              "url": "/name_B-catB",
+            },
+          ]
+        `);
+      });
+
+      it('should select sub categories when sub category is selected', () => {
+        expect(getNavigationCategories('A')(store$.state)).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "hasChildren": true,
+              "name": "name_A.1",
+              "uniqueId": "A.1",
+              "url": "/name_A.1-catA.1",
+            },
+            Object {
+              "hasChildren": false,
+              "name": "name_A.2",
+              "uniqueId": "A.2",
+              "url": "/name_A.2-catA.2",
+            },
+          ]
+        `);
+      });
+
+      it('should select deeper sub categories when deeper sub category is selected', () => {
+        expect(getNavigationCategories('A.1')(store$.state)).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "hasChildren": false,
+              "name": "name_A.1.a",
+              "uniqueId": "A.1.a",
+              "url": "/name_A.1.a-catA.1.a",
+            },
+            Object {
+              "hasChildren": false,
+              "name": "name_A.1.b",
+              "uniqueId": "A.1.b",
+              "url": "/name_A.1.b-catA.1.b",
+            },
+          ]
+        `);
+      });
+
+      it('should be empty when selecting leaves', () => {
+        expect(getNavigationCategories('A.1.a')(store$.state)).toBeEmpty();
+      });
+    });
   });
 });
diff --git a/src/app/core/store/shopping/categories/categories.selectors.ts b/src/app/core/store/shopping/categories/categories.selectors.ts
index 191b33b3e6d..41d2eb2dfbc 100644
--- a/src/app/core/store/shopping/categories/categories.selectors.ts
+++ b/src/app/core/store/shopping/categories/categories.selectors.ts
@@ -2,8 +2,10 @@ import { Dictionary } from '@ngrx/entity';
 import { createSelector, createSelectorFactory, defaultMemoize } from '@ngrx/store';
 import { isEqual } from 'lodash-es';
 
+import { CategoryTree, CategoryTreeHelper } from 'ish-core/models/category-tree/category-tree.model';
 import { CategoryView, createCategoryView } from 'ish-core/models/category-view/category-view.model';
 import { Category, CategoryHelper } from 'ish-core/models/category/category.model';
+import { NavigationCategory } from 'ish-core/models/navigation-category/navigation-category.model';
 import { generateCategoryUrl } from 'ish-core/routing/category/category.route';
 import { selectRouteParam } from 'ish-core/store/core/router';
 import { ShoppingState, getShoppingState } from 'ish-core/store/shopping/shopping-store';
@@ -17,10 +19,21 @@ export const getCategoryTree = createSelector(getCategoriesState, state => state
  */
 export const getCategoryEntities = createSelector(getCategoryTree, tree => tree.nodes);
 
+const getCategorySubTree = (uniqueId: string) =>
+  createSelectorFactory(projector =>
+    defaultMemoize(projector, CategoryTreeHelper.equals, CategoryTreeHelper.equals)
+  )(getCategoryTree, (tree: CategoryTree) => CategoryTreeHelper.subTree(tree, uniqueId));
+
+export const getCategory = (uniqueId: string) =>
+  createSelectorFactory(projector => defaultMemoize(projector, CategoryTreeHelper.equals, isEqual))(
+    getCategorySubTree(uniqueId),
+    (tree: CategoryTree) => createCategoryView(tree, uniqueId)
+  );
+
 /**
  * Retrieves the currently resolved selected category.
  */
-export const getSelectedCategory = createSelector(
+export const getSelectedCategory = createSelectorFactory(projector => defaultMemoize(projector, undefined, isEqual))(
   getCategoryTree,
   selectRouteParam('categoryUniqueId'),
   createCategoryView
@@ -28,10 +41,6 @@ export const getSelectedCategory = createSelector(
 
 export const getCategoryLoading = createSelector(getCategoriesState, categories => categories.loading);
 
-export const getTopLevelCategories = createSelector(getCategoryTree, tree =>
-  tree.rootIds.map(id => createCategoryView(tree, id))
-);
-
 export const isTopLevelCategoriesLoaded = createSelector(getCategoriesState, state => state.topLevelLoaded);
 
 export const getBreadcrumbForCategoryPage = createSelectorFactory(projector =>
@@ -47,3 +56,24 @@ export const getBreadcrumbForCategoryPage = createSelectorFactory(projector =>
         }))
     : undefined
 );
+
+function mapNavigationCategoryFromId(uniqueId: string): NavigationCategory {
+  return {
+    uniqueId,
+    name: this.nodes[uniqueId].name,
+    url: generateCategoryUrl(this.nodes[uniqueId]),
+    hasChildren: !!this.edges[uniqueId]?.length,
+  };
+}
+
+export const getNavigationCategories = (uniqueId: string) =>
+  createSelectorFactory(projector => defaultMemoize(projector, CategoryTreeHelper.equals, isEqual))(
+    getCategoryTree,
+    (tree: CategoryTree): NavigationCategory[] => {
+      if (!uniqueId) {
+        return tree.rootIds.map(mapNavigationCategoryFromId.bind(tree));
+      }
+      const subTree = CategoryTreeHelper.subTree(tree, uniqueId);
+      return subTree.edges[uniqueId] ? subTree.edges[uniqueId].map(mapNavigationCategoryFromId.bind(subTree)) : [];
+    }
+  );
diff --git a/src/app/core/store/shopping/shopping-store.spec.ts b/src/app/core/store/shopping/shopping-store.spec.ts
index 974dcac9f53..554c5651277 100644
--- a/src/app/core/store/shopping/shopping-store.spec.ts
+++ b/src/app/core/store/shopping/shopping-store.spec.ts
@@ -491,12 +491,8 @@ describe('Shopping Store', () => {
           categories: tree(A,A.123)
         [Categories API] Load Category Success:
           categories: tree(A.123,A.123.456)
-        [Categories Internal] Load Category:
-          categoryId: "A.123"
         [Viewconf Internal] Set Breadcrumb Data:
           breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA...
-        [Categories API] Load Category Success:
-          categories: tree(A.123,A.123.456)
         @ngrx/router-store/navigated:
           routerState: {"url":"/category/A.123.456","params":{"categoryUniqueId":"A...
           event: {"id":1,"url":"/category/A.123.456"}
@@ -735,10 +731,6 @@ describe('Shopping Store', () => {
           categories: tree(A,A.123)
         [Categories API] Load Category Success:
           categories: tree(A.123,A.123.456)
-        [Categories Internal] Load Category:
-          categoryId: "A.123"
-        [Categories API] Load Category Success:
-          categories: tree(A.123,A.123.456)
         @ngrx/router-store/navigated:
           routerState: {"url":"/category/A.123.456/product/P1","params":{"categoryU...
           event: {"id":1,"url":"/category/A.123.456/product/P1"}
diff --git a/src/app/pages/category/category-categories/category-categories.component.html b/src/app/pages/category/category-categories/category-categories.component.html
index db11a95f65b..d3cbef4601b 100644
--- a/src/app/pages/category/category-categories/category-categories.component.html
+++ b/src/app/pages/category/category-categories/category-categories.component.html
@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-md-3">
       <div class="navigation-panel" [ngbCollapse]="isCollapsed">
-        <ish-category-navigation [category]="category" [categoryNavigationLevel]="0"></ish-category-navigation>
+        <ish-category-navigation [uniqueId]="category.categoryPath[0]"></ish-category-navigation>
       </div>
       <a class="d-md-none mobile-filter-toggle" (click)="toggle()">
         {{ 'search.mobile.filter.trigger' | translate }}
@@ -13,7 +13,7 @@
     <div class="col-md-9">
       <ish-breadcrumb></ish-breadcrumb>
       <h1>{{ category.name }}</h1>
-      <ish-category-list [categories]="category.children()"></ish-category-list>
+      <ish-category-list [categories]="category.children"></ish-category-list>
     </div>
   </div>
 </div>
diff --git a/src/app/pages/category/category-list/category-list.component.html b/src/app/pages/category/category-list/category-list.component.html
index e3dd78bda4a..4f76e8d382e 100644
--- a/src/app/pages/category/category-list/category-list.component.html
+++ b/src/app/pages/category/category-list/category-list.component.html
@@ -1,5 +1,5 @@
 <ul class="category-list row">
-  <li *ngFor="let category of categories; trackBy: trackByFn" class="category-list-item col-6 col-lg-4">
-    <ish-category-tile [category]="category"></ish-category-tile>
+  <li *ngFor="let category of categories" class="category-list-item col-6 col-lg-4">
+    <ish-category-tile [categoryUniqueId]="category"></ish-category-tile>
   </li>
 </ul>
diff --git a/src/app/pages/category/category-list/category-list.component.spec.ts b/src/app/pages/category/category-list/category-list.component.spec.ts
index e4761010cf0..56e978438e3 100644
--- a/src/app/pages/category/category-list/category-list.component.spec.ts
+++ b/src/app/pages/category/category-list/category-list.component.spec.ts
@@ -2,8 +2,6 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockComponent } from 'ng-mocks';
 
-import { Category } from 'ish-core/models/category/category.model';
-
 import { CategoryTileComponent } from '../category-tile/category-tile.component';
 
 import { CategoryListComponent } from './category-list.component';
@@ -24,10 +22,7 @@ describe('Category List Component', () => {
     fixture = TestBed.createComponent(CategoryListComponent);
     component = fixture.componentInstance;
     element = fixture.nativeElement;
-    component.categories = [
-      { uniqueId: 'uid1', name: 'name1', images: [{ effectiveUrl: '/url1.png' }] },
-      { uniqueId: 'uid2', name: 'name2', images: [{ effectiveUrl: '/url2.png' }] },
-    ] as Category[];
+    component.categories = ['uid1', 'uid2'];
   });
 
   it('should be created', () => {
@@ -36,8 +31,12 @@ describe('Category List Component', () => {
     expect(() => fixture.detectChanges()).not.toThrow();
     expect(element).toMatchInlineSnapshot(`
       <ul class="category-list row">
-        <li class="category-list-item col-6 col-lg-4"><ish-category-tile></ish-category-tile></li>
-        <li class="category-list-item col-6 col-lg-4"><ish-category-tile></ish-category-tile></li>
+        <li class="category-list-item col-6 col-lg-4">
+          <ish-category-tile ng-reflect-category-unique-id="uid1"></ish-category-tile>
+        </li>
+        <li class="category-list-item col-6 col-lg-4">
+          <ish-category-tile ng-reflect-category-unique-id="uid2"></ish-category-tile>
+        </li>
       </ul>
     `);
   });
diff --git a/src/app/pages/category/category-list/category-list.component.ts b/src/app/pages/category/category-list/category-list.component.ts
index 7139f2bb0ad..647e2e3a947 100644
--- a/src/app/pages/category/category-list/category-list.component.ts
+++ b/src/app/pages/category/category-list/category-list.component.ts
@@ -1,17 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
-import { CategoryView } from 'ish-core/models/category-view/category-view.model';
-import { Category } from 'ish-core/models/category/category.model';
-
 @Component({
   selector: 'ish-category-list',
   templateUrl: './category-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CategoryListComponent {
-  @Input() categories: Category[];
-
-  trackByFn(_, item: CategoryView) {
-    return item.uniqueId;
-  }
+  @Input() categories: string[];
 }
diff --git a/src/app/pages/category/category-navigation/category-navigation.component.html b/src/app/pages/category/category-navigation/category-navigation.component.html
index 83673a98bf2..96e145056f6 100644
--- a/src/app/pages/category/category-navigation/category-navigation.component.html
+++ b/src/app/pages/category/category-navigation/category-navigation.component.html
@@ -1,18 +1,17 @@
-<div *ngIf="category.pathCategories()[categoryNavigationLevel]?.hasChildren()" class="non-parametric-panel">
+<div *ngIf="currentCategoryId$ | async as currentCategoryId" class="non-parametric-panel">
   <div class="filter-group">
     <ul class="filter-list">
-      <li *ngFor="let subCategory of category.pathCategories()[categoryNavigationLevel].children()" class="filter-item">
+      <li *ngFor="let category of navigationCategories$ | async" class="filter-item">
         <a
           class="filter-item-name"
-          [ngClass]="{ 'filter-selected': categoryEquals(subCategory, category) }"
-          [routerLink]="subCategory | ishCategoryRoute"
+          [ngClass]="{ 'filter-selected': category.uniqueId === currentCategoryId }"
+          [routerLink]="category.url"
         >
-          {{ subCategory.name }}
+          {{ category.name }}
         </a>
         <ish-category-navigation
-          *ngIf="categoryEquals(subCategory, category.pathCategories()[categoryNavigationLevel + 1])"
-          [category]="category"
-          [categoryNavigationLevel]="categoryNavigationLevel + 1"
+          *ngIf="currentCategoryId.startsWith(category.uniqueId)"
+          [uniqueId]="category.uniqueId"
         ></ish-category-navigation>
       </li>
     </ul>
diff --git a/src/app/pages/category/category-navigation/category-navigation.component.spec.ts b/src/app/pages/category/category-navigation/category-navigation.component.spec.ts
index 13fff5ab2d2..dc4b3bb1ba9 100644
--- a/src/app/pages/category/category-navigation/category-navigation.component.spec.ts
+++ b/src/app/pages/category/category-navigation/category-navigation.component.spec.ts
@@ -1,11 +1,12 @@
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockPipe } from 'ng-mocks';
+import { of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
 
-import { createCategoryView } from 'ish-core/models/category-view/category-view.model';
-import { Category } from 'ish-core/models/category/category.model';
+import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
+import { NavigationCategory } from 'ish-core/models/navigation-category/navigation-category.model';
 import { CategoryRoutePipe } from 'ish-core/routing/category/category-route.pipe';
-import { categoryTree } from 'ish-core/utils/dev/test-data-utils';
 
 import { CategoryNavigationComponent } from './category-navigation.component';
 
@@ -15,27 +16,70 @@ describe('Category Navigation Component', () => {
   let element: HTMLElement;
 
   beforeEach(async(() => {
+    const shoppingFacade = mock(ShoppingFacade);
+    when(shoppingFacade.selectedCategory$).thenReturn(of({ uniqueId: 'A.1' }));
+    when(shoppingFacade.navigationCategories$(undefined)).thenReturn(
+      of([
+        { uniqueId: 'A', name: 'nA', url: '/c/A' },
+        { uniqueId: 'B', name: 'nB', url: '/c/B' },
+      ] as NavigationCategory[])
+    );
+    when(shoppingFacade.navigationCategories$('A')).thenReturn(
+      of([
+        { uniqueId: 'A.1', name: 'nA.1', url: '/c/A/A.1' },
+        { uniqueId: 'A.2', name: 'nA.2', url: '/c/A/A.2' },
+      ] as NavigationCategory[])
+    );
+    when(shoppingFacade.navigationCategories$('B')).thenReturn(of([] as NavigationCategory[]));
+
     TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       declarations: [CategoryNavigationComponent, MockPipe(CategoryRoutePipe)],
+      providers: [{ provide: ShoppingFacade, useFactory: () => instance(shoppingFacade) }],
     })
       .compileComponents()
       .then(() => {
         fixture = TestBed.createComponent(CategoryNavigationComponent);
         component = fixture.componentInstance;
         element = fixture.nativeElement;
-
-        const tree = categoryTree([
-          { uniqueId: 'A', categoryPath: ['A'] },
-          { uniqueId: 'A.1', categoryPath: ['A', 'A.1'] },
-        ] as Category[]);
-        component.category = createCategoryView(tree, 'A');
       });
   }));
 
   it('should be created', () => {
     expect(component).toBeTruthy();
     expect(element).toBeTruthy();
+    expect(() => component.ngOnChanges()).not.toThrow();
     expect(() => fixture.detectChanges()).not.toThrow();
   });
+
+  it('should create all links for tree', () => {
+    component.ngOnChanges();
+    fixture.detectChanges();
+
+    expect(element.querySelectorAll('a')).toMatchInlineSnapshot(`
+      NodeList [
+        <a class="filter-item-name" ng-reflect-router-link="/c/A" href="/c/A"> nA </a>,
+        <a class="filter-item-name filter-selected" ng-reflect-router-link="/c/A/A.1" href="/c/A/A.1">
+        nA.1
+      </a>,
+        <a class="filter-item-name" ng-reflect-router-link="/c/A/A.2" href="/c/A/A.2"> nA.2 </a>,
+        <a class="filter-item-name" ng-reflect-router-link="/c/B" href="/c/B"> nB </a>,
+      ]
+    `);
+  });
+
+  it('should create all links for top level category', () => {
+    component.uniqueId = 'A';
+    component.ngOnChanges();
+    fixture.detectChanges();
+
+    expect(element.querySelectorAll('a')).toMatchInlineSnapshot(`
+      NodeList [
+        <a class="filter-item-name filter-selected" ng-reflect-router-link="/c/A/A.1" href="/c/A/A.1">
+        nA.1
+      </a>,
+        <a class="filter-item-name" ng-reflect-router-link="/c/A/A.2" href="/c/A/A.2"> nA.2 </a>,
+      ]
+    `);
+  });
 });
diff --git a/src/app/pages/category/category-navigation/category-navigation.component.ts b/src/app/pages/category/category-navigation/category-navigation.component.ts
index 2f57f9de151..9e22e45b287 100644
--- a/src/app/pages/category/category-navigation/category-navigation.component.ts
+++ b/src/app/pages/category/category-navigation/category-navigation.component.ts
@@ -1,16 +1,28 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
-import { CategoryView } from 'ish-core/models/category-view/category-view.model';
-import { CategoryHelper } from 'ish-core/models/category/category.model';
+import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
+import { NavigationCategory } from 'ish-core/models/navigation-category/navigation-category.model';
 
 @Component({
   selector: 'ish-category-navigation',
   templateUrl: './category-navigation.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CategoryNavigationComponent {
-  @Input() category: CategoryView;
-  @Input() categoryNavigationLevel: number;
+export class CategoryNavigationComponent implements OnInit, OnChanges {
+  @Input() uniqueId: string;
 
-  categoryEquals = CategoryHelper.equals;
+  navigationCategories$: Observable<NavigationCategory[]>;
+  currentCategoryId$: Observable<string>;
+
+  constructor(private shoppingFacade: ShoppingFacade) {}
+
+  ngOnInit() {
+    this.currentCategoryId$ = this.shoppingFacade.selectedCategory$.pipe(map(c => c?.uniqueId));
+  }
+
+  ngOnChanges() {
+    this.navigationCategories$ = this.shoppingFacade.navigationCategories$(this.uniqueId);
+  }
 }
diff --git a/src/app/pages/category/category-page.component.html b/src/app/pages/category/category-page.component.html
index b6061da61e7..1d94df947e3 100644
--- a/src/app/pages/category/category-page.component.html
+++ b/src/app/pages/category/category-page.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="category$ | async as category">
   <!-- category with subcategories -->
-  <ng-container *ngIf="category.hasChildren(); else productListing">
+  <ng-container *ngIf="category.hasChildren; else productListing">
     <ish-category-categories [category]="category" [deviceType]="deviceType$ | async"></ish-category-categories>
   </ng-container>
 
@@ -12,7 +12,7 @@
   </ng-template>
 
   <!-- empty category without subcategories and without products -->
-  <ng-container *ngIf="!category.hasChildren() && !category.hasOnlineProducts">
+  <ng-container *ngIf="!category.hasChildren && !category.hasOnlineProducts">
     <!-- TODO: decide how to handle empty categories -->
     <h1>{{ category.name }}</h1>
   </ng-container>
diff --git a/src/app/pages/category/category-tile/category-tile.component.html b/src/app/pages/category/category-tile/category-tile.component.html
index d5caa19b7cc..657ef39b064 100644
--- a/src/app/pages/category/category-tile/category-tile.component.html
+++ b/src/app/pages/category/category-tile/category-tile.component.html
@@ -1,4 +1,8 @@
-<div class="category-name" [attr.data-testing-id]="'category-' + category.uniqueId">
+<div
+  *ngIf="category$ | async as category"
+  class="category-name"
+  [attr.data-testing-id]="'category-' + category.uniqueId"
+>
   <a [routerLink]="category | ishCategoryRoute">
     <ish-category-image [category]="category"></ish-category-image>
     <h3>{{ category.name }}</h3>
diff --git a/src/app/pages/category/category-tile/category-tile.component.spec.ts b/src/app/pages/category/category-tile/category-tile.component.spec.ts
index 170e778149f..9166b6a7faa 100644
--- a/src/app/pages/category/category-tile/category-tile.component.spec.ts
+++ b/src/app/pages/category/category-tile/category-tile.component.spec.ts
@@ -1,7 +1,10 @@
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MockComponent, MockPipe } from 'ng-mocks';
+import { of } from 'rxjs';
+import { anything, instance, mock, when } from 'ts-mockito';
 
+import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { createCategoryView } from 'ish-core/models/category-view/category-view.model';
 import { Category } from 'ish-core/models/category/category.model';
 import { CategoryRoutePipe } from 'ish-core/routing/category/category-route.pipe';
@@ -16,10 +19,33 @@ describe('Category Tile Component', () => {
   let fixture: ComponentFixture<CategoryTileComponent>;
   let element: HTMLElement;
 
+  const category = {
+    uniqueId: 'A',
+    categoryPath: ['A'],
+    images: [
+      {
+        name: 'front S',
+        type: 'Image',
+        imageActualHeight: 110,
+        imageActualWidth: 110,
+        viewID: 'front',
+        effectiveUrl: '/assets/product_img/a.jpg',
+        typeID: 'S',
+        primaryImage: false,
+      },
+    ],
+  } as Category;
+
   beforeEach(async(() => {
+    const shoppingFacade = mock(ShoppingFacade);
+    when(shoppingFacade.category$(anything())).thenReturn(
+      of(createCategoryView(categoryTree([category]), category.uniqueId))
+    );
+
     TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       declarations: [CategoryTileComponent, MockComponent(CategoryImageComponent), MockPipe(CategoryRoutePipe)],
+      providers: [{ provide: ShoppingFacade, useFactory: () => instance(shoppingFacade) }],
     }).compileComponents();
   }));
 
@@ -27,24 +53,6 @@ describe('Category Tile Component', () => {
     fixture = TestBed.createComponent(CategoryTileComponent);
     component = fixture.componentInstance;
     element = fixture.nativeElement;
-    const category = {
-      uniqueId: 'A',
-      categoryPath: ['A'],
-      images: [
-        {
-          name: 'front S',
-          type: 'Image',
-          imageActualHeight: 110,
-          imageActualWidth: 110,
-          viewID: 'front',
-          effectiveUrl: '/assets/product_img/a.jpg',
-          typeID: 'S',
-          primaryImage: false,
-        },
-      ],
-    } as Category;
-    component.category = createCategoryView(categoryTree([category]), category.uniqueId);
-    fixture.detectChanges();
   });
 
   it('should be created', () => {
diff --git a/src/app/pages/category/category-tile/category-tile.component.ts b/src/app/pages/category/category-tile/category-tile.component.ts
index e686f5d793f..36e292b7c7b 100644
--- a/src/app/pages/category/category-tile/category-tile.component.ts
+++ b/src/app/pages/category/category-tile/category-tile.component.ts
@@ -1,5 +1,7 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 
+import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { CategoryView } from 'ish-core/models/category-view/category-view.model';
 
 /**
@@ -7,16 +9,24 @@ import { CategoryView } from 'ish-core/models/category-view/category-view.model'
  * category using {@link CategoryImageComponent}.
  *
  * @example
- * <ish-category-tile [category]="category"></ish-category-tile>
+ * <ish-category-tile [categoryUniqueId]="category"></ish-category-tile>
  */
 @Component({
   selector: 'ish-category-tile',
   templateUrl: './category-tile.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CategoryTileComponent {
+export class CategoryTileComponent implements OnInit {
   /**
    * The Category to render a tile for
    */
-  @Input() category: CategoryView;
+  @Input() categoryUniqueId: string;
+
+  category$: Observable<CategoryView>;
+
+  constructor(private shoppingFacade: ShoppingFacade) {}
+
+  ngOnInit() {
+    this.category$ = this.shoppingFacade.category$(this.categoryUniqueId);
+  }
 }
diff --git a/src/app/shell/header/header-navigation/header-navigation.component.html b/src/app/shell/header/header-navigation/header-navigation.component.html
index b3d56a82f03..73da88917dd 100644
--- a/src/app/shell/header/header-navigation/header-navigation.component.html
+++ b/src/app/shell/header/header-navigation/header-navigation.component.html
@@ -7,26 +7,28 @@
     *ngFor="let category of categories$ | async"
     #submenu
     class="dropdown"
-    [ngClass]="{ open: isOpened(category) }"
+    [ngClass]="{ open: isOpened(category.uniqueId) }"
     (mouseover)="subMenuShow(submenu)"
     (mouseleave)="subMenuHide(submenu)"
     (click)="subMenuHide(submenu)"
   >
     <a
-      [routerLink]="category | ishCategoryRoute"
+      [routerLink]="category.url"
       [attr.data-testing-id]="category.uniqueId + '-link'"
-      [ngStyle]="{ width: !category.hasChildren() ? '100%' : '' }"
+      [ngStyle]="{ width: !category.hasChildren ? '100%' : '' }"
     >
       {{ category.name }}
     </a>
-    <a *ngIf="category.hasChildren()" class="dropdown-toggle" (click)="toggleOpen(category)">
-      <fa-icon *ngIf="isOpened(category); else closed" [icon]="['fas', 'minus']"></fa-icon>
-      <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
-    </a>
-    <ish-sub-category-navigation
-      [category]="category"
-      [subCategoriesDepth]="1"
-      [view]="view"
-    ></ish-sub-category-navigation>
+    <ng-container *ngIf="category.hasChildren">
+      <a class="dropdown-toggle" (click)="toggleOpen(category.uniqueId)">
+        <fa-icon *ngIf="isOpened(category.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
+        <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
+      </a>
+      <ish-sub-category-navigation
+        [categoryUniqueId]="category.uniqueId"
+        [subCategoriesDepth]="1"
+        [view]="view"
+      ></ish-sub-category-navigation>
+    </ng-container>
   </li>
 </ng-template>
diff --git a/src/app/shell/header/header-navigation/header-navigation.component.spec.ts b/src/app/shell/header/header-navigation/header-navigation.component.spec.ts
index 6b42a08d3a2..369210c8125 100644
--- a/src/app/shell/header/header-navigation/header-navigation.component.spec.ts
+++ b/src/app/shell/header/header-navigation/header-navigation.component.spec.ts
@@ -6,10 +6,8 @@ import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
-import { createCategoryView } from 'ish-core/models/category-view/category-view.model';
-import { Category } from 'ish-core/models/category/category.model';
+import { NavigationCategory } from 'ish-core/models/navigation-category/navigation-category.model';
 import { CategoryRoutePipe } from 'ish-core/routing/category/category-route.pipe';
-import { categoryTree } from 'ish-core/utils/dev/test-data-utils';
 import { SubCategoryNavigationComponent } from 'ish-shell/header/sub-category-navigation/sub-category-navigation.component';
 
 import { HeaderNavigationComponent } from './header-navigation.component';
@@ -40,19 +38,12 @@ describe('Header Navigation Component', () => {
     component = fixture.componentInstance;
     element = fixture.nativeElement;
 
-    const categories = categoryTree([
-      { uniqueId: 'A', name: 'CAT_A', categoryPath: ['A'] },
-      { uniqueId: 'B', name: 'CAT_B', categoryPath: ['B'] },
-      { uniqueId: 'C', name: 'CAT_C', categoryPath: ['C'] },
-    ] as Category[]);
-
-    const topLevelCategories = [
-      createCategoryView(categories, 'A'),
-      createCategoryView(categories, 'B'),
-      createCategoryView(categories, 'C'),
-    ];
-
-    when(shoppingFacade.topLevelCategories$).thenReturn(of(topLevelCategories));
+    const categories = [
+      { uniqueId: 'A', name: 'CAT_A', url: '/cat/A', hasChildren: true },
+      { uniqueId: 'B', name: 'CAT_B', url: '/cat/B' },
+      { uniqueId: 'C', name: 'CAT_C', url: '/cat/C' },
+    ] as NavigationCategory[];
+    when(shoppingFacade.navigationCategories$()).thenReturn(of(categories));
   });
 
   it('should be created', () => {
@@ -62,43 +53,23 @@ describe('Header Navigation Component', () => {
     expect(element).toMatchInlineSnapshot(`
       <ul class="navbar-nav main-navigation-list">
         <li class="dropdown">
-          <a
-            style="width: 100%;"
-            ng-reflect-router-link="/CAT_A-catA"
-            data-testing-id="A-link"
-            href="/CAT_A-catA"
-          >
-            CAT_A </a
+          <a ng-reflect-router-link="/cat/A" data-testing-id="A-link" href="/cat/A"> CAT_A </a
+          ><a class="dropdown-toggle"><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a
           ><ish-sub-category-navigation
             ng-reflect-view="auto"
+            ng-reflect-category-unique-id="A"
             ng-reflect-sub-categories-depth="1"
           ></ish-sub-category-navigation>
         </li>
         <li class="dropdown">
-          <a
-            style="width: 100%;"
-            ng-reflect-router-link="/CAT_B-catB"
-            data-testing-id="B-link"
-            href="/CAT_B-catB"
-          >
-            CAT_B </a
-          ><ish-sub-category-navigation
-            ng-reflect-view="auto"
-            ng-reflect-sub-categories-depth="1"
-          ></ish-sub-category-navigation>
+          <a style="width: 100%;" ng-reflect-router-link="/cat/B" data-testing-id="B-link" href="/cat/B">
+            CAT_B
+          </a>
         </li>
         <li class="dropdown">
-          <a
-            style="width: 100%;"
-            ng-reflect-router-link="/CAT_C-catC"
-            data-testing-id="C-link"
-            href="/CAT_C-catC"
-          >
-            CAT_C </a
-          ><ish-sub-category-navigation
-            ng-reflect-view="auto"
-            ng-reflect-sub-categories-depth="1"
-          ></ish-sub-category-navigation>
+          <a style="width: 100%;" ng-reflect-router-link="/cat/C" data-testing-id="C-link" href="/cat/C">
+            CAT_C
+          </a>
         </li>
       </ul>
     `);
diff --git a/src/app/shell/header/header-navigation/header-navigation.component.ts b/src/app/shell/header/header-navigation/header-navigation.component.ts
index 5927c8c3491..d09560451a9 100644
--- a/src/app/shell/header/header-navigation/header-navigation.component.ts
+++ b/src/app/shell/header/header-navigation/header-navigation.component.ts
@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { Observable } from 'rxjs';
 
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
-import { CategoryView } from 'ish-core/models/category-view/category-view.model';
-import { Category } from 'ish-core/models/category/category.model';
+import { NavigationCategory } from 'ish-core/models/navigation-category/navigation-category.model';
 
 @Component({
   selector: 'ish-header-navigation',
@@ -13,14 +12,14 @@ import { Category } from 'ish-core/models/category/category.model';
 export class HeaderNavigationComponent implements OnInit {
   @Input() view: 'auto' | 'small' | 'full' = 'auto';
 
-  categories$: Observable<CategoryView[]>;
+  categories$: Observable<NavigationCategory[]>;
 
   openedCategories = [];
 
   constructor(private shoppingFacade: ShoppingFacade) {}
 
   ngOnInit() {
-    this.categories$ = this.shoppingFacade.topLevelCategories$;
+    this.categories$ = this.shoppingFacade.navigationCategories$();
   }
 
   /**
@@ -45,16 +44,16 @@ export class HeaderNavigationComponent implements OnInit {
    * Indicate if specific category is expanded.
    * @param category The category item.
    */
-  isOpened(category: Category): boolean {
-    return this.openedCategories.includes(category.uniqueId);
+  isOpened(uniqueId: string): boolean {
+    return this.openedCategories.includes(uniqueId);
   }
 
   /**
    * Toggle category open state.
    * @param category The category item.
    */
-  toggleOpen(category: Category) {
-    const index = this.openedCategories.findIndex(id => id === category.uniqueId);
-    index > -1 ? this.openedCategories.splice(index, 1) : this.openedCategories.push(category.uniqueId);
+  toggleOpen(uniqueId: string) {
+    const index = this.openedCategories.findIndex(id => id === uniqueId);
+    index > -1 ? this.openedCategories.splice(index, 1) : this.openedCategories.push(uniqueId);
   }
 }
diff --git a/src/app/shell/header/sub-category-navigation/__snapshots__/sub-category-navigation.component.spec.ts.snap b/src/app/shell/header/sub-category-navigation/__snapshots__/sub-category-navigation.component.spec.ts.snap
deleted file mode 100644
index 0c22c696e27..00000000000
--- a/src/app/shell/header/sub-category-navigation/__snapshots__/sub-category-navigation.component.spec.ts.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Sub Category Navigation Component should be created 1`] = `
-<ul class="category-level1 dropdown-menu">
-  <li class="main-navigation-level1-item">
-    <a ng-reflect-router-link="/CAT_A1-catA.1" href="/CAT_A1-catA.1">CAT_A1</a
-    ><a class="dropdown-toggle"><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a
-    ><ish-sub-category-navigation ng-reflect-sub-categories-depth="2"
-      ><ul class="category-level2">
-        <li class="main-navigation-level2-item">
-          <a ng-reflect-router-link="/CAT_A1a-catA.1.a" href="/CAT_A1a-catA.1.a">CAT_A1a</a
-          ><a class="dropdown-toggle"><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a>
-        </li></ul
-    ></ish-sub-category-navigation>
-  </li>
-  <li class="main-navigation-level1-item">
-    <a style="width: 100%;" ng-reflect-router-link="/CAT_A2-catA.2" href="/CAT_A2-catA.2">CAT_A2</a
-    ><ish-sub-category-navigation ng-reflect-sub-categories-depth="2"></ish-sub-category-navigation>
-  </li>
-</ul>
-`;
diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
index 177146edc9a..faf3a27408f 100644
--- a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
+++ b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
@@ -1,28 +1,28 @@
 <ul
-  *ngIf="category.hasChildren()"
+  *ngIf="navigationCategories$ | async as categories"
   class="category-level{{ subCategoriesDepth }}"
   [ngClass]="{ 'dropdown-menu': subCategoriesDepth === 1 }"
 >
   <li
-    *ngFor="let subcategory of category.children()"
+    *ngFor="let subcategory of categories"
     class="main-navigation-level{{ subCategoriesDepth }}-item"
-    [ngClass]="{ open: isOpened(subcategory) }"
+    [ngClass]="{ open: isOpened(subcategory.uniqueId) }"
   >
-    <a [routerLink]="subcategory | ishCategoryRoute" [ngStyle]="{ width: !subcategory.hasChildren() ? '100%' : '' }">{{
+    <a [routerLink]="subcategory.url" [ngStyle]="{ width: !subcategory.hasChildren ? '100%' : '' }">{{
       subcategory.name
     }}</a>
     <a
-      *ngIf="subcategory.hasChildren()"
+      *ngIf="subcategory.hasChildren"
       class="dropdown-toggle"
       [ngClass]="{ 'd-none': view === 'full' }"
-      (click)="toggleOpen(subcategory)"
+      (click)="toggleOpen(subcategory.uniqueId)"
     >
-      <fa-icon *ngIf="isOpened(subcategory); else closed" [icon]="['fas', 'minus']"></fa-icon>
+      <fa-icon *ngIf="isOpened(subcategory.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
       <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
     </a>
     <ish-sub-category-navigation
-      *ngIf="subCategoriesDepth < mainNavigationMaxSubCategoriesDepth"
-      [category]="subcategory"
+      *ngIf="subCategoriesDepth < mainNavigationMaxSubCategoriesDepth && subcategory.hasChildren"
+      [categoryUniqueId]="subcategory.uniqueId"
       [subCategoriesDepth]="subCategoriesDepth + 1"
     ></ish-sub-category-navigation>
   </li>
diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
index 613cfe55ca2..902f76a1663 100644
--- a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
+++ b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
@@ -2,12 +2,13 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
 
 import { MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH } from 'ish-core/configurations/injection-keys';
-import { createCategoryView } from 'ish-core/models/category-view/category-view.model';
-import { Category } from 'ish-core/models/category/category.model';
+import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
+import { NavigationCategory } from 'ish-core/models/navigation-category/navigation-category.model';
 import { CategoryRoutePipe } from 'ish-core/routing/category/category-route.pipe';
-import { categoryTree } from 'ish-core/utils/dev/test-data-utils';
 
 import { SubCategoryNavigationComponent } from './sub-category-navigation.component';
 
@@ -17,10 +18,30 @@ describe('Sub Category Navigation Component', () => {
   let element: HTMLElement;
 
   beforeEach(async(() => {
+    const shoppingFacade = mock(ShoppingFacade);
+
+    when(shoppingFacade.navigationCategories$('A')).thenReturn(
+      of([
+        { uniqueId: 'A.1', name: 'CAT_A1', url: '/CAT_A1-catA.1', hasChildren: true },
+        { uniqueId: 'A.2', name: 'CAT_A2', url: '/CAT_A2-catA.2' },
+      ] as NavigationCategory[])
+    );
+    when(shoppingFacade.navigationCategories$('A.1')).thenReturn(
+      of([{ uniqueId: 'A.1.a', name: 'CAT_A1a', url: '/CAT_A1a-catA.1.a', hasChildren: true }] as NavigationCategory[])
+    );
+    when(shoppingFacade.navigationCategories$('A.1.a')).thenReturn(
+      of([
+        { uniqueId: 'A.1.a.alpha', name: 'CAT_A1aAlpha', url: '/CAT_A1aAlpha-catA.1.a.alpha' },
+      ] as NavigationCategory[])
+    );
+
     TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       declarations: [CategoryRoutePipe, MockComponent(FaIconComponent), SubCategoryNavigationComponent],
-      providers: [{ provide: MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH, useValue: 2 }],
+      providers: [
+        { provide: MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH, useValue: 2 },
+        { provide: ShoppingFacade, useFactory: () => instance(shoppingFacade) },
+      ],
     }).compileComponents();
   }));
 
@@ -29,15 +50,7 @@ describe('Sub Category Navigation Component', () => {
     component = fixture.componentInstance;
     element = fixture.nativeElement;
 
-    const tree = categoryTree([
-      { uniqueId: 'A', name: 'CAT_A', categoryPath: ['A'] },
-      { uniqueId: 'A.1', name: 'CAT_A1', categoryPath: ['A', 'A.1'] },
-      { uniqueId: 'A.2', name: 'CAT_A2', categoryPath: ['A', 'A.2'] },
-      { uniqueId: 'A.1.a', name: 'CAT_A1a', categoryPath: ['A', 'A.1', 'A.1.a'] },
-      { uniqueId: 'A.1.a.alpha', name: 'CAT_A1aAlpha', categoryPath: ['A', 'A.1', 'A.1.a', 'A.1.a.alpha'] },
-    ] as Category[]);
-
-    component.category = createCategoryView(tree, 'A');
+    component.categoryUniqueId = 'A';
     component.subCategoriesDepth = 1;
   });
 
@@ -45,6 +58,25 @@ describe('Sub Category Navigation Component', () => {
     expect(component).toBeTruthy();
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
-    expect(element).toMatchSnapshot();
+    expect(element).toMatchInlineSnapshot(`
+      <ul class="category-level1 dropdown-menu">
+        <li class="main-navigation-level1-item">
+          <a ng-reflect-router-link="/CAT_A1-catA.1" href="/CAT_A1-catA.1">CAT_A1</a
+          ><a class="dropdown-toggle"><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a
+          ><ish-sub-category-navigation
+            ng-reflect-category-unique-id="A.1"
+            ng-reflect-sub-categories-depth="2"
+            ><ul class="category-level2">
+              <li class="main-navigation-level2-item">
+                <a ng-reflect-router-link="/CAT_A1a-catA.1.a" href="/CAT_A1a-catA.1.a">CAT_A1a</a
+                ><a class="dropdown-toggle"><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a>
+              </li></ul
+          ></ish-sub-category-navigation>
+        </li>
+        <li class="main-navigation-level1-item">
+          <a style="width: 100%;" ng-reflect-router-link="/CAT_A2-catA.2" href="/CAT_A2-catA.2">CAT_A2</a>
+        </li>
+      </ul>
+    `);
   });
 });
diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.ts b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.ts
index 5611f66effa..4b36a634c90 100644
--- a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.ts
+++ b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.ts
@@ -1,47 +1,48 @@
-import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 
 import { MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH } from 'ish-core/configurations/injection-keys';
-import { CategoryView } from 'ish-core/models/category-view/category-view.model';
-import { Category } from 'ish-core/models/category/category.model';
+import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
+import { NavigationCategory } from 'ish-core/models/navigation-category/navigation-category.model';
 
 /**
  * The Sub Category Navigation Component displays second level category navigation.
- *
- * @example
- * <ish-sub-category-navigation
- *   [category]="category"
- *   [subCategoriesDepth]="1"
- * >
- * </ish-sub-category-navigation>
  */
 @Component({
   selector: 'ish-sub-category-navigation',
   templateUrl: './sub-category-navigation.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SubCategoryNavigationComponent {
+export class SubCategoryNavigationComponent implements OnInit {
   @Input() view = 'auto';
-  @Input() category: CategoryView;
+  @Input() categoryUniqueId: string;
   @Input() subCategoriesDepth: number;
 
-  openedCategories = [];
+  openedCategories: string[] = [];
 
-  constructor(@Inject(MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH) public mainNavigationMaxSubCategoriesDepth: number) {}
+  navigationCategories$: Observable<NavigationCategory[]>;
+
+  constructor(
+    private shoppingFacade: ShoppingFacade,
+    @Inject(MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH) public mainNavigationMaxSubCategoriesDepth: number
+  ) {}
+
+  ngOnInit() {
+    this.navigationCategories$ = this.shoppingFacade.navigationCategories$(this.categoryUniqueId);
+  }
 
   /**
    * Indicate if specific category is expanded.
-   * @param category The category item.
    */
-  isOpened(category: Category): boolean {
-    return this.openedCategories.includes(category.uniqueId);
+  isOpened(uniqueId: string): boolean {
+    return this.openedCategories.includes(uniqueId);
   }
 
   /**
    * Toggle category open state.
-   * @param category The category item.
    */
-  toggleOpen(category: Category) {
-    const index = this.openedCategories.findIndex(id => id === category.uniqueId);
-    index > -1 ? this.openedCategories.splice(index, 1) : this.openedCategories.push(category.uniqueId);
+  toggleOpen(uniqueId: string) {
+    const index = this.openedCategories.findIndex(id => id === uniqueId);
+    index > -1 ? this.openedCategories.splice(index, 1) : this.openedCategories.push(uniqueId);
   }
 }