diff --git a/source/_patterns/01-molecules/15-navbar/navbar-menu.mustache b/source/_patterns/01-molecules/15-navbar/navbar-menu.mustache
index 60de7b4cfe40a8afd9493b5c2b6f78c5289e709e..c4492fc1c77039b772786dd84e133c66fcfef64c 100644
--- a/source/_patterns/01-molecules/15-navbar/navbar-menu.mustache
+++ b/source/_patterns/01-molecules/15-navbar/navbar-menu.mustache
@@ -3,11 +3,14 @@
     <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">HlavnĂ­ strana</a>
   </li>
   <li class="navbar-menu__item">
-    <ui-navbar-subitem label="Lidé">
-      <ul class="navbar-menu__submenu">
-        <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
-      </ul>
-    </ui-navbar-subtitem>
+    <ui-navbar-subitem-replacing label="Lidé">
+      <span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
+      <div class="navbar-menu__submenu-wrap">
+        <ul class="navbar-menu__submenu">
+          <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
+        </ul>
+      </div>
+    </ui-navbar-subtitem-replacing>
   </li>
   <li class="navbar-menu__item">
     <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
diff --git a/source/_patterns/02-organisms/01-navbar/navbar.mustache b/source/_patterns/02-organisms/01-navbar/navbar.mustache
index 5e86d17e2d80020a8f1935974bb9460a6153a389..9ab0280cfffef8aba94a87eb6632df24c57a0e68 100644
--- a/source/_patterns/02-organisms/01-navbar/navbar.mustache
+++ b/source/_patterns/02-organisms/01-navbar/navbar.mustache
@@ -28,25 +28,34 @@
                 <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">HlavnĂ­ strana</a>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Lidé">
-                  <ul class="navbar-menu__submenu">
-                    <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
-                  </ul>
-                </ui-navbar-subtitem>
+                <ui-navbar-subitem-replacing label="Lidé" items="[[&quot;Delší link co je delší než hlavní menu položka&quot;, &quot;{{ link.templates-people }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
+                    </ul>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
-                  <ul class="navbar-menu__submenu">
-                    <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
-                  </ul>
-                </ui-navbar-subtitem>
+                <ui-navbar-subitem-replacing label="Aktuality" href="{{ link.templates-article-listing }}" items="[[&quot;Detail aktuality&quot;, &quot;{{ link.templates-article-detail }}&quot;]]">
+                  <a href="{{ link.templates-article-listing }}" class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</a>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
+                    </ul>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Volby">
-                  <ul class="navbar-menu__submenu">
-                    <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">VolebnĂ­ rozcestnĂ­k</a></li>
-                  </ul>
-                </ui-navbar-subtitem>
+                <ui-navbar-subitem-replacing label="Volby" items="[[&quot;VolebnĂ­ rozcestnĂ­k&quot;, &quot;{{ link.templates-elections }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Volby</span>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">VolebnĂ­ rozcestnĂ­k</a></li>
+                    </ul>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
                 <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
diff --git a/source/js/components/navbar/Navbar.vue b/source/js/components/navbar/Navbar.vue
index bf73f55f2ff5b2d510b90b8a2ca02cd4d1239d09..e0c6be97e09a823e41b55a15d70943d36d419b98 100644
--- a/source/js/components/navbar/Navbar.vue
+++ b/source/js/components/navbar/Navbar.vue
@@ -1,10 +1,12 @@
 <script>
   import UiNavbarSubitem from "./NavbarSubitem";
+  import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
   import { isLgScreenSize } from "../../utils";
 
   export default {
     components: {
-      UiNavbarSubitem
+      UiNavbarSubitem,
+      UiNavbarSubitemReplacing,
     },
     data() {
       return {
diff --git a/source/js/components/navbar/NavbarSubitemReplacing.vue b/source/js/components/navbar/NavbarSubitemReplacing.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9fd051ef9211031dbe9fd8872641d4c3dc5346a9
--- /dev/null
+++ b/source/js/components/navbar/NavbarSubitemReplacing.vue
@@ -0,0 +1,59 @@
+<template>
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
+    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
+    <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
+      <ul class="navbar-menu__submenu">
+        <li v-for="(item, index) in parsedItems" :key="index">
+            <a :href="item[1]" class="navbar-menu__link">{{ item[0] }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isLgScreenSize } from "../../utils";
+
+export default {
+  data() {
+    return {
+      show: false,
+      parsedItems: JSON.parse(this.items),
+    };
+  },
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    items: {
+      type: String,
+    }
+  },
+  methods: {
+    onMouseEnter() {
+      if (isLgScreenSize()) {
+        this.$data.show = true;
+      }
+    },
+    onMouseLeave() {
+      if (isLgScreenSize()) {
+        this.$data.show = false;
+      }
+    },
+    handleClick(evt) {
+      // On mobile screens, first click should just toggle and redir on second one
+      if (isLgScreenSize() || this.$data.show) {
+        if (this.$props.href) {
+          window.location = this.$props.href;
+        }
+      }
+
+      this.$data.show = !this.$data.show;
+    }
+  }
+}
+</script>