diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
index 9722f07a..5f0efd19 100644
--- a/projects/demo/src/app/app.component.html
+++ b/projects/demo/src/app/app.component.html
@@ -4,6 +4,64 @@ <h1 class="header title">{{ title }}</h1>
     A simple yet powerful tree component for Angular.
   </div>
   <div class="header info debug">View events in Dev Console.</div>
+  <nav class="nav">
+    <ul>
+        <li routerLinkActive="active">
+          <a routerLink="/">Full tree</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="basic">Basic tree</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="fields">Fields</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="templates">Templates</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="filter">Filter</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="empty">Empty</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="rtl">RTL</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="async">Async</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="save-restore">Save&Restore</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="checkboxes">Checkboxes</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="drag">Drag</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="dragover-styling">Dragover Styling</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="dragover-styling-full-tree">Dragover Styling Full Tree</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="virtual">Virtual</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="api">API</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="actions">Actions</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="scroll-container">Scroll Container</a>
+        </li>
+        <li routerLinkActive="active">
+          <a routerLink="context-menu">Context Menu</a>
+        </li>
+      </ul>   
+  </nav>
 </header>
 <section>
   <article>
diff --git a/projects/demo/src/app/app.component.scss b/projects/demo/src/app/app.component.scss
index c6bbb365..98c0bb8e 100644
--- a/projects/demo/src/app/app.component.scss
+++ b/projects/demo/src/app/app.component.scss
@@ -2,7 +2,7 @@
   position: sticky;
   top: 0;
   background: purple;
-  height: 110px;
+  height: 155px;
   z-index: 2;
 }
 
@@ -28,14 +28,40 @@
   line-height: 35px;
 }
 
+.header .nav {
+  line-height: 35px;
+  height: 45px;
+  background-color: #111;
+}
+
+.header .nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.header .nav ul li a {
+  display: block;
+  color: white;
+  text-decoration: none;
+  padding: 5px 8px;
+  white-space: nowrap;
+}
+
+.header .nav ul li a:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 section {
   font-size: 0.875rem;
   display: flex;
-  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 section article {
-  flex: 1;
-  display: flex;
-  margin: 10px;
+  margin-top: 10px;
+  width: 90%;
 }
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
index e08962ac..bd308ca6 100644
--- a/projects/demo/src/app/app.component.ts
+++ b/projects/demo/src/app/app.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
-    imports: [RouterOutlet]
+    imports: [RouterOutlet, RouterLink, RouterLinkActive]
 })
 export class AppComponent {
   title = 'Angular Tree Component';
diff --git a/projects/demo/src/app/dragover-styling/dragover-styling-full-tree.component.ts b/projects/demo/src/app/dragover-styling/dragover-styling-full-tree.component.ts
index 335982da..a4d1c2b6 100644
--- a/projects/demo/src/app/dragover-styling/dragover-styling-full-tree.component.ts
+++ b/projects/demo/src/app/dragover-styling/dragover-styling-full-tree.component.ts
@@ -37,7 +37,7 @@ const actionMapping: IActionMapping = {
         placeholder="filter nodes"
       />
     </form>
-    <div style="height: 400px; width: 400px; overflow: hidden;">
+    <div style="height: 250px; overflow: hidden;">
       <tree-root
         #tree
         [nodes]="nodes"
diff --git a/projects/demo/src/app/fulltree/fulltree.component.ts b/projects/demo/src/app/fulltree/fulltree.component.ts
index f8e50e45..5d180da5 100644
--- a/projects/demo/src/app/fulltree/fulltree.component.ts
+++ b/projects/demo/src/app/fulltree/fulltree.component.ts
@@ -41,7 +41,7 @@ const actionMapping: IActionMapping = {
   <form>
     <input #filter (keyup)="filterNodes(filter.value, tree)" placeholder="filter nodes"/>
   </form>
-  <div style="height: 280px; width: 400px; overflow: hidden;">
+  <div style="height: 250px; overflow: hidden;">
 
     <tree-root
       #tree