diff --git a/lib/classes/ResponsiveHelper.php b/lib/classes/ResponsiveHelper.php
index afa5005e5d063460c8d7f01228a3574b2fc8deea..d4d0651be474b0b04ad3b096d3ff75515982a13e 100644
--- a/lib/classes/ResponsiveHelper.php
+++ b/lib/classes/ResponsiveHelper.php
@@ -53,7 +53,8 @@ class ResponsiveHelper
                 'parent'   => '/',
                 'path'     => $path,
                 'visible'  => $forceVisibility ? true : $nav->isVisible(true),
-                'active'   => $nav->isActive()
+                'active'   => $nav->isActive(),
+                'button'   => $nav->getRenderAsButton(),
             ];
 
             if ($nav->isActive()) {
@@ -130,7 +131,8 @@ class ResponsiveHelper
                 'parent'  => $path,
                 'path'    => $subpath,
                 'visible' => $subnav->isVisible(),
-                'active'  => $subnav->isActive()
+                'active'  => $subnav->isActive(),
+                'button'  => $subnav->getRenderAsButton(),
             ];
 
             if ($subnav->isActive()) {
diff --git a/lib/navigation/Navigation.php b/lib/navigation/Navigation.php
index c8fde82f930a39bbc85b986abe9bfe6fb6186bf8..9f26ab6e672440f1d178f759f828627fc737cd2f 100644
--- a/lib/navigation/Navigation.php
+++ b/lib/navigation/Navigation.php
@@ -554,6 +554,8 @@ class Navigation implements IteratorAggregate
 
     /**
      * Return the list of subnavigation items of this object.
+     *
+     * @return Navigation[]
      */
     public function getSubNavigation()
     {
diff --git a/resources/assets/stylesheets/highcontrast.scss b/resources/assets/stylesheets/highcontrast.scss
index aba822354ea3b4615dbd57c7164669c17c52df35..fe4c654f49cf093519c628ce6f423fe7ed861588 100644
--- a/resources/assets/stylesheets/highcontrast.scss
+++ b/resources/assets/stylesheets/highcontrast.scss
@@ -1049,7 +1049,8 @@ button.skiplink {
     }
 
     // list elements when hovering
-    a {
+    a,
+    button {
         &:hover {
             background-color: $lightgray;
             color: $black;
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 7892d30daeb7c3344e78500404e91cd49a03d0f0..5c2121430d3b718443df2d3fca06af10ebcf804e 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -216,7 +216,8 @@ $sidebarOut: -330px;
         color: var(--white);
         flex: 1;
 
-        > a {
+        > a,
+        button {
             display: inline-block;
             padding: 10px 10px 10px 5px;
             text-align: left;
diff --git a/resources/vue/components/responsive/NavigationItem.vue b/resources/vue/components/responsive/NavigationItem.vue
index 50ab5a8cac00cc74969c872076108c8da691cb3b..d65bda39917ec9e73bf1794da91ff2026870e505 100644
--- a/resources/vue/components/responsive/NavigationItem.vue
+++ b/resources/vue/components/responsive/NavigationItem.vue
@@ -10,7 +10,7 @@
                 >
                     <span class="navigation-icon">
                         <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
-                        <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
+                        <img v-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
                     </span>
                     <span class="navigation-text">
                         {{ item.title }}
@@ -29,14 +29,28 @@
             </button>
         </template>
         <div v-else class="navigation-title">
-            <a
+            <form v-if="item.button"
+                  :action="item.url"
+                  method="post"
+            >
+                <button class="as-link"
+                        tabindex="0"
+                        :title="navigateToText(item.title)"
+                        :aria-label="navigateToText(item.title)"
+                >
+                    <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
+                    <img v-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
+                    {{ item.title }}
+                </button>
+            </form>
+            <a v-else
                 :href="item.url"
                 tabindex="0"
                 :title="navigateToText(item.title)"
                 :aria-label="navigateToText(item.title)"
             >
                 <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
-                <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
+                <img v-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
                 {{ item.title }}
             </a>
         </div>