diff --git a/src/controller/AbstractDefaultController.php b/src/controller/AbstractDefaultController.php
index a1e5c2d..95c5665 100644
--- a/src/controller/AbstractDefaultController.php
+++ b/src/controller/AbstractDefaultController.php
@@ -21,9 +21,10 @@ class AbstractDefaultController extends AbstractController
     private function addMenuItems(array $variables): array
     {
         if (array_key_exists('menu_items', $variables)) {
-            throw new \Exception('You aren\'t allowed to define this key!');
+            $variables['menu_items'] = array_merge($this->getMenuItems(),$variables['menu_items']);
+        }else{
+            $variables['menu_items'] = $this->getMenuItems();
         }
-        $variables['menu_items'] = $this->getMenuItems();
         return $variables;
     }
 
diff --git a/src/controller/product/Product.php b/src/controller/product/Product.php
index 8410e71..56ee5ad 100644
--- a/src/controller/product/Product.php
+++ b/src/controller/product/Product.php
@@ -5,6 +5,8 @@ use repository\product\Product as ProductRepository;
 use core\Core;
 use router\link\Link;
 use controller\AbstractDefaultController;
+use Doctrine\Common\Collections\ArrayCollection;
+use router\link\LinkCollection;
 
 /**
  *
@@ -35,17 +37,18 @@ final class Product extends AbstractDefaultController implements ProductInterfac
         }
         $this->render('product/list.html.twig', [
             'products' => $products,
-            'colors' => $this->getColors()
+            'colors' => $this->getColors(),
+            'menu_items'=>[$this->getColors()]
         ]);
     }
 
-    private function getColors(): array
+    private function getColors(): ArrayCollection
     {
-        $colors = [];
+        $colors = new LinkCollection('color filter');
         foreach ($this->productRepository->getColors() as $color) {
             $parameters = $_GET;
             $parameters['color'] = $color['color'];
-            $colors[] = new Link($parameters, $color['color']);
+            $colors->add(new Link($parameters, $color['color']));
         }
         return $colors;
     }
diff --git a/src/router/link/LinkCollection.php b/src/router/link/LinkCollection.php
new file mode 100644
index 0000000..3c4da2c
--- /dev/null
+++ b/src/router/link/LinkCollection.php
@@ -0,0 +1,27 @@
+<?php
+namespace router\link;
+
+use Doctrine\Common\Collections\ArrayCollection;
+
+/**
+ *
+ * @author kevinfrantz
+ *        
+ */
+final class LinkCollection extends ArrayCollection implements LinkCollectionInterface
+{
+    /**
+     * @var string
+     */
+    private $name;
+    
+    public function __construct(string $name){
+        $this->name = $name;
+    }
+    
+    public function getName(): string
+    {
+        return $this->name;
+    }
+}
+
diff --git a/src/router/link/LinkCollectionInterface.php b/src/router/link/LinkCollectionInterface.php
new file mode 100644
index 0000000..d2c3895
--- /dev/null
+++ b/src/router/link/LinkCollectionInterface.php
@@ -0,0 +1,13 @@
+<?php
+namespace router\link;
+
+/**
+ *
+ * @author kevinfrantz
+ *        
+ */
+interface LinkCollectionInterface
+{
+    public function getName():string;
+}
+
diff --git a/src/template/frames/default.html.twig b/src/template/frames/default.html.twig
index 6f7238f..8f7d51c 100644
--- a/src/template/frames/default.html.twig
+++ b/src/template/frames/default.html.twig
@@ -1,6 +1,7 @@
 {% extends "base.html.twig" %}
 {% block body %}
 {% include 'frames/structure/navbar.html.twig' with menu_items %}
+<br />
 <div class="container">
 	{% block content %}
 	{% endblock %}
diff --git a/src/template/frames/structure/navbar.html.twig b/src/template/frames/structure/navbar.html.twig
index b0687c2..6bbe9e1 100644
--- a/src/template/frames/structure/navbar.html.twig
+++ b/src/template/frames/structure/navbar.html.twig
@@ -1,32 +1,34 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <a class="navbar-brand" href="/">Online Shop</a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ul class="navbar-nav mr-auto">
-      {% for item in menu_items %}
-          <!--<li class="nav-item active">
-            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-          </li>
-          -->
-          <li class="nav-item {% if item.active %}active{% endif %}">
-            <a class="nav-link" href="{{ item.url }}">{{ item.name }}</a>
-          </li>
-          <!--
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              Dropdown
-            </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
-          </li>
-           -->
-      {% endfor %}
-    </ul>
-  </div>
+	<a class="navbar-brand" href="/">Online Shop</a>
+	<button class="navbar-toggler" type="button" data-toggle="collapse"
+		data-target="#navbarSupportedContent"
+		aria-controls="navbarSupportedContent" aria-expanded="false"
+		aria-label="Toggle navigation">
+		<span class="navbar-toggler-icon"></span>
+	</button>
+	<div class="collapse navbar-collapse" id="navbarSupportedContent">
+		<ul class="navbar-nav mr-auto">
+			{% for item in menu_items %}
+			{% if item.name %}
+			{% if item.url %}
+			<li class="nav-item {% if item.active %}active{% endif %}"><a
+				class="nav-link" href="{{ item.url }}"> {{ item.name }}
+			</a></li>
+			{% elseif item.toArray %}
+			<li class="nav-item dropdown"><a
+				class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
+				role="button" data-toggle="dropdown" aria-haspopup="true"
+				aria-expanded="false"> {{ item.name }}
+			</a>
+				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+					{%for link in item %}
+					<a class="dropdown-item {% if link.active %}active{% endif %}" href="{{ link.url }}">{{ link.name }}</a>
+					{% endfor %}
+				</div></li>
+			{% endif %}
+			{% endif %}
+
+			{% endfor %}
+		</ul>
+	</div>
 </nav>
\ No newline at end of file
diff --git a/src/template/product/list.html.twig b/src/template/product/list.html.twig
index 349c65c..1bde3a3 100644
--- a/src/template/product/list.html.twig
+++ b/src/template/product/list.html.twig
@@ -1,17 +1,6 @@
 {% extends 'frames/default.html.twig' %}
 {% block title %}product overview{% endblock %}
 {% block content %}
-<div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    filter by color:
-  </button>
-  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-    {% for color in colors %}
-    	<a class="dropdown-item" href="{{ color.getUrl }}">{{ color.getName }}</a>
-    {% endfor %}
-  </div>
-</div>
-<hr />
 <div class="card-columns">
 	{% for product in products %}
 	<div class="card" style="width: 18rem;">