diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.html
index 45a7d6b2d448fd93ca344af58f6e06314931fce3..a64d85dd6d9ad26051113e168ac82cdef9d818d2 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.html
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.html
@@ -52,3 +52,41 @@
     </a>
   </div>
 {% endblock %}
+
+{% block menu_items %}
+  {% for item in menu_items %}
+    <a
+      href="{{ item.url }}"
+      class="
+        decoration-1 underline-offset-4 mx-2
+        
+        {% if item == selected_item %}navbar__menu-item--selected{% endif %}
+      "
+    >{{ item.name }}</a>
+  {% endfor %}
+
+  {% for parent in menu_parents %}
+    <div
+      class="dropdown nav-link js-scroll-anchor"
+      tabindex="0"
+    >
+      <div class="dropbtn">
+        {{ parent.name }}
+
+        <span class="drop-arrow">
+          <i class="ico--chevron-down"></i>
+        </span>
+      </div>
+
+      <div class="dropdown-content">
+        {% for nested_item in parent.menu_items %}
+          <li>
+            <a href="{{ nested_item.url }}">
+              {{ nested_item.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+{% endblock %}
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml b/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml
index a96af01520c162567b6c3565f89e4ec342dafe3d..ef62c3e9a67e73ee6346d10b27a5ce6a2912b18b 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/district/navbar.yaml
@@ -31,6 +31,17 @@ context:
       name: 'Kontakt'
       url: '#'
 
+  menu_parents:
+    -
+      name: 'Volby'
+      menu_items:
+        -
+          name: 'Aktuality'
+          url: '#'
+        -
+          name: 'Lidé'
+          url: '#'
+
   important_item: 'Krajské volby'
   important_item_url: 'https://example.com'
 
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
index 13699c36b952ec175affab0cc3773c394d72f44b..230682dd8a89090248ead78574b292b4241f5379 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
@@ -48,12 +48,16 @@
 
       <!-- BEGIN Menu -->
       <div
-        class="flex text-2xl gap-8 font-alt items-center justify-end"
+        class="flex text-2xl gap-4 font-alt items-center justify-end"
       >
         {% if important_item %}
           <a
             href="{{ important_item_url }}"
-            class="__js-root flex gap-1 items-center decoration-1 underline-offset-4 {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}"
+            class="
+              __js-root mx-2 flex gap-1 items-center decoration-1 underline-offset-4
+              
+              {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}
+            "
           >
             <div class="mb-1">
               {% if not is_transparent or is_on_dark_background %}
@@ -75,12 +79,18 @@
           </a>
         {% endif %}
 
-        {% for item in menu_items %}
-          <a
-            href="{{ item.url }}"
-            class="decoration-1 underline-offset-4 {% if item == selected_item %}navbar__menu-item--selected{% endif %}"
-          >{{ item.name }}</a>
-        {% endfor %}
+        {% block menu_items %}
+          {% for item in menu_items %}
+            <a
+              href="{{ item.url }}"
+              class="
+                decoration-1 underline-offset-4 mx-2
+                
+                {% if item == selected_item %}navbar__menu-item--selected{% endif %}
+              "
+            >{{ item.name }}</a>
+          {% endfor %}
+        {% endblock %}
 
         {% if menu_button %}
           {% if additional_buttons or menu_button_url %}
diff --git a/src/css/atoms/dropdown.pcss b/src/css/atoms/dropdown.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..2a304f7b8d1b7bcae615fa4cd290ac63a4847941
--- /dev/null
+++ b/src/css/atoms/dropdown.pcss
@@ -0,0 +1,62 @@
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  @apply relative cursor-pointer;
+}
+
+.dropbtn {
+  @apply p-3;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  @apply hidden absolute z-[1] list-none;
+}
+
+@media screen and (max-width: 1200px) {
+  .dropdown-content {
+    position: unset;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .dropbtn {
+    @apply hidden;
+  }
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  @apply block text-white;
+}
+
+@media screen and (min-width: 1200px) {
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content,
+  .dropdown:focus .dropdown-content {
+    @apply flex flex-col gap-3 bg-black w-full p-3;
+  }
+
+  .dropdown:hover .dropbtn,
+  .dropdown:focus .dropbtn {
+    @apply text-white relative;
+  }
+
+  .dropdown-content li {
+    @apply leading-6;
+  }
+
+  .dropdown:hover,
+  .dropdown:focus {
+    @apply bg-black;
+  }
+}
+
+.drop-arrow {
+  @apply ml-1 relative top-[2px];
+}
+
+@media screen and (max-width: 1200px) {
+  .drop-arrow {
+    @apply hidden;
+  }
+}
diff --git a/src/css/style.pcss b/src/css/style.pcss
index 059d67037a8227efc9c4dc4b38b2999e040be12b..ea23d32e8d5b6815dd6d1324a29a2001d6ea44c5 100644
--- a/src/css/style.pcss
+++ b/src/css/style.pcss
@@ -24,6 +24,7 @@
 @import "atoms/heading.pcss";
 @import "atoms/icons.pcss";
 @import "atoms/full-calendar.pcss";
+@import "atoms/dropdown.pcss";
 
 @import "molecules/articles.pcss";
 @import "molecules/block-quote.pcss";