diff --git a/packages/web/src/scss/components/Navigation/README.md b/packages/web/src/scss/components/Navigation/README.md
index e11cba6d26..df301c83eb 100644
--- a/packages/web/src/scss/components/Navigation/README.md
+++ b/packages/web/src/scss/components/Navigation/README.md
@@ -12,8 +12,17 @@ It consists of these parts:
 
 The `Navigation` is a `nav` wrapper for lists of actions or other navigation components.
 
+The `Navigation` component can be horizontal or vertical.
+
 ```html
-<nav class="Navigation" aria-label="Main Navigation">
+<nav class="Navigation Navigation--horizontal" aria-label="Horizontal Main Navigation">
+  <ul>
+    <li>
+      <!-- action -->
+    </li>
+  </ul>
+</nav>
+<nav class="Navigation Navigation--vertical" aria-label="Vertical Main Navigation">
   <ul>
     <li>
       <!-- action -->
@@ -66,10 +75,12 @@ The `NavigationAction` is component that is styled to be used as a navigation ac
 <a class="NavigationAction" href="#">Link</a>
 ```
 
-It can obtain `selected` or `disabled` states by adding the respective classes.
+It can obtain `selected` or `disabled` states by adding the respective classes. The selected visual state
+is also turned on by the `aria-expanded` attribute.
 
 ```html
 <a class="NavigationAction NavigationAction--selected" href="#" aria-current="page">Selected Link</a>
+<button class="NavigationAction" type="button" aria-expanded="true">Expanded Aria Button</button>
 <span class="NavigationAction NavigationAction--disabled">Disabled Link</span>
 ```
 
@@ -85,7 +96,7 @@ inherit the height of the `Header`.
 With NavigationAction components:
 
 ```html
-<nav class="Navigation" aria-label="Main Navigation">
+<nav class="Navigation Navigation--horizontal" aria-label="Main Navigation">
   <ul>
     <li class="NavigationItem NavigationItem--alignmentYCenter">
       <a class="NavigationAction NavigationAction--selected" href="#" aria-current="page">Selected Link</a>
@@ -103,7 +114,7 @@ With NavigationAction components:
 With Buttons:
 
 ```html
-<nav class="Navigation" aria-label="Secondary Navigation">
+<nav class="Navigation Navigation--horizontal" aria-label="Secondary Navigation">
   <ul>
     <li class="NavigationItem NavigationItem--alignmentYCenter">
       <a href="#" class="Button Button--medium Button--primary">Button</a>
diff --git a/packages/web/src/scss/components/Navigation/_Navigation.scss b/packages/web/src/scss/components/Navigation/_Navigation.scss
index 79c8a4e6cc..9bd2a9cf16 100644
--- a/packages/web/src/scss/components/Navigation/_Navigation.scss
+++ b/packages/web/src/scss/components/Navigation/_Navigation.scss
@@ -2,13 +2,18 @@
 @use '../../tools/reset';
 @use 'theme';
 
-.Navigation,
-.Navigation > ul {
+.Navigation--horizontal,
+.Navigation--horizontal > ul {
     display: flex;
 }
 
-.Navigation:has(.NavigationAction) {
-    height: var(--#{tokens.$css-variable-prefix}navigation-height, theme.$height);
+.Navigation--vertical,
+.Navigation--vertical > ul {
+    display: grid;
+}
+
+.Navigation--horizontal:has(.NavigationAction) {
+    height: var(--#{tokens.$css-variable-prefix}navigation-height, theme.$horizontal-height);
 }
 
 .Navigation:not(:has(.NavigationAction)),
@@ -16,6 +21,10 @@
     gap: theme.$spacing;
 }
 
+.Navigation--vertical:has(.NavigationAction) > ul {
+    gap: theme.$spacing-dense;
+}
+
 .Navigation > ul {
     @include reset.list();
 }
diff --git a/packages/web/src/scss/components/Navigation/_NavigationAction.scss b/packages/web/src/scss/components/Navigation/_NavigationAction.scss
index 56771b54db..f644cb3142 100644
--- a/packages/web/src/scss/components/Navigation/_NavigationAction.scss
+++ b/packages/web/src/scss/components/Navigation/_NavigationAction.scss
@@ -1,6 +1,8 @@
-// 1. We need to set the top border too, otherwise the content won't be aligned properly.
+// 1. We want specific typography for nested items in the Navigation component.
+// 2. In the vertical Navigation component, the stripe is placed outside the NavigationAction element,
+//    so we need to disable pointer events on it.
+// 3. We want the selected and expanded states to override the hover and active states.
 
-@use '@tokens' as tokens;
 @use '../../tools/reset';
 @use '../../tools/typography';
 @use 'theme';
@@ -10,24 +12,23 @@
 }
 
 .NavigationAction {
-    @include typography.generate(theme.$action-typography);
-
+    position: relative;
     display: flex;
     gap: theme.$action-gap;
     align-items: center;
-    justify-content: center;
-    padding-inline: theme.$action-spacing;
     color: theme.$action-color-state-default;
-    border-top: theme.$action-border-bottom-width theme.$action-border-bottom-style transparent; // 1.
-    border-bottom: theme.$action-border-bottom-width theme.$action-border-bottom-style
-        theme.$action-border-bottom-color-state-default;
     background-color: theme.$action-background-color-state-default;
 
+    &::after {
+        content: '';
+        position: absolute;
+        background-color: theme.$action-stripe-background-color-state-default;
+    }
+
     @media (hover: hover) {
         &:hover {
             text-decoration: none;
             color: theme.$action-color-state-hover;
-            border-bottom-color: theme.$action-border-bottom-color-state-hover;
             background-color: theme.$action-background-color-state-hover;
         }
     }
@@ -35,24 +36,25 @@
     &:active {
         text-decoration: none;
         color: theme.$action-color-state-active;
-        border-bottom-color: theme.$action-border-bottom-color-state-active;
         background-color: theme.$action-background-color-state-active;
     }
 }
 
-.NavigationAction--selected {
+// stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity -- 1.
+.Navigation--vertical
+    > ul
+    ul
+    .NavigationAction:not(:is(.NavigationAction--selected, .NavigationAction[aria-expanded='true'])) {
+    @include typography.generate(theme.$vertical-action-typography-nested);
+}
+
+.NavigationAction--selected,
+.NavigationAction[aria-expanded='true'] {
     color: theme.$action-color-state-selected;
-    border-bottom-color: theme.$action-border-bottom-color-selected-state-default;
     background-color: theme.$action-background-color-state-selected;
 
-    @media (hover: hover) {
-        &:hover {
-            border-bottom-color: theme.$action-border-bottom-color-selected-state-hover;
-        }
-    }
-
-    &:active {
-        border-bottom-color: theme.$action-border-bottom-color-selected-state-active;
+    &::after {
+        background-color: theme.$action-stripe-background-color-selected-state-default;
     }
 }
 
@@ -60,3 +62,57 @@
     color: theme.$action-color-state-disabled;
     pointer-events: none;
 }
+
+.Navigation--horizontal .NavigationAction {
+    @include typography.generate(theme.$horizontal-action-typography);
+
+    justify-content: center;
+    padding-inline: theme.$action-spacing-dense;
+
+    &::after {
+        inset-inline: 0;
+        bottom: 0;
+        height: theme.$horizontal-action-stripe-size;
+    }
+}
+
+.Navigation--vertical .NavigationAction {
+    @include typography.generate(theme.$vertical-action-typography);
+
+    justify-content: space-between;
+    padding-inline: theme.$action-spacing;
+    padding-block: theme.$action-spacing-dense;
+    border-radius: theme.$vertical-action-border-radius;
+
+    &::after {
+        inset-block: 0;
+        left: calc(-1 * #{theme.$spacing});
+        width: theme.$vertical-action-stripe-size;
+        pointer-events: none; // 2.
+    }
+}
+
+@media (hover: hover) {
+    .Navigation--horizontal .NavigationAction:hover::after {
+        background-color: theme.$horizontal-action-stripe-background-color-state-hover;
+    }
+}
+
+.Navigation--horizontal .NavigationAction:active::after {
+    background-color: theme.$horizontal-action-stripe-background-color-state-active;
+}
+
+// stylelint-disable selector-max-specificity -- 3.
+.Navigation--horizontal .NavigationAction--selected,
+.Navigation--horizontal .NavigationAction[aria-expanded='true'] {
+    @media (hover: hover) {
+        &:hover::after {
+            background-color: theme.$action-stripe-background-color-selected-state-hover;
+        }
+    }
+
+    &:active::after {
+        background-color: theme.$action-stripe-background-color-selected-state-active;
+    }
+}
+// stylelint-enable selector-max-specificity
diff --git a/packages/web/src/scss/components/Navigation/_NavigationItem.scss b/packages/web/src/scss/components/Navigation/_NavigationItem.scss
index ead180f731..11d89e1e22 100644
--- a/packages/web/src/scss/components/Navigation/_NavigationItem.scss
+++ b/packages/web/src/scss/components/Navigation/_NavigationItem.scss
@@ -1,11 +1,8 @@
-@use '@tokens' as tokens;
+// 1. We don't want to add inline padding to nested NavigationItems
+
 @use '../../tools/dictionaries';
 @use 'theme';
 
-.NavigationItem {
-    display: flex;
-}
-
 @include dictionaries.generate-alignments(
     $class-name: 'NavigationItem',
     $dictionary-values: theme.$item-alignment-dictionary,
@@ -15,3 +12,16 @@
 .NavigationItem:has(.NavigationAction) {
     align-items: stretch;
 }
+
+.Navigation--horizontal .NavigationItem {
+    display: flex;
+}
+
+.Navigation--vertical .NavigationItem {
+    display: grid;
+
+    // stylelint-disable-next-line selector-max-class, selector-max-specificity -- 1.
+    &:not(& .NavigationItem) {
+        padding-inline: theme.$spacing;
+    }
+}
diff --git a/packages/web/src/scss/components/Navigation/_theme.scss b/packages/web/src/scss/components/Navigation/_theme.scss
index 44447273f1..1274810f07 100644
--- a/packages/web/src/scss/components/Navigation/_theme.scss
+++ b/packages/web/src/scss/components/Navigation/_theme.scss
@@ -2,28 +2,40 @@
 
 @use '@tokens' as tokens;
 
+$spacing-dense: tokens.$space-400;
 $spacing: tokens.$space-700;
-$height: 50px;
 
-$action-typography: tokens.$body-small-semibold;
-$action-gap: tokens.$space-600;
-$action-spacing: tokens.$space-600;
+$horizontal-height: 50px;
+
+$item-alignment-dictionary: center, stretch; // 1.
+
+$horizontal-action-typography: tokens.$body-small-semibold;
+$vertical-action-typography: tokens.$body-medium-semibold;
+$vertical-action-typography-nested: tokens.$body-medium-regular;
+$action-gap: tokens.$space-700;
+$action-spacing-dense: tokens.$space-600;
+$action-spacing: tokens.$space-700;
+
 $action-color-state-default: tokens.$component-header-item-state-default;
 $action-color-state-hover: tokens.$component-header-item-state-hover;
 $action-color-state-active: tokens.$component-header-item-state-active;
 $action-color-state-selected: tokens.$component-header-item-state-selected;
 $action-color-state-disabled: tokens.$disabled-content;
-$action-border-bottom-width: tokens.$border-width-200;
-$action-border-bottom-style: solid;
-$action-border-bottom-color-state-default: transparent;
-$action-border-bottom-color-state-hover: tokens.$component-header-stripe-state-unselected;
-$action-border-bottom-color-state-active: tokens.$component-header-stripe-state-unselected;
-$action-border-bottom-color-selected-state-default: tokens.$component-header-stripe-state-selected;
-$action-border-bottom-color-selected-state-hover: tokens.$component-header-stripe-state-selected;
-$action-border-bottom-color-selected-state-active: tokens.$component-header-stripe-state-selected;
+
+$vertical-action-border-radius: tokens.$radius-200;
+
 $action-background-color-state-default: tokens.$component-header-item-background-state-default;
 $action-background-color-state-hover: tokens.$component-header-item-background-state-hover;
 $action-background-color-state-active: tokens.$component-header-item-background-state-active;
 $action-background-color-state-selected: tokens.$component-header-item-background-state-selected;
 
-$item-alignment-dictionary: center, stretch; // 1.
+$action-stripe-background-color-state-default: transparent;
+$action-stripe-background-color-selected-state-default: tokens.$component-header-stripe-state-selected;
+$action-stripe-background-color-selected-state-hover: tokens.$component-header-stripe-state-selected;
+$action-stripe-background-color-selected-state-active: tokens.$component-header-stripe-state-selected;
+
+$horizontal-action-stripe-background-color-state-hover: tokens.$component-header-stripe-state-unselected;
+$horizontal-action-stripe-background-color-state-active: tokens.$component-header-stripe-state-unselected;
+$horizontal-action-stripe-size: 2px;
+
+$vertical-action-stripe-size: 4px;
diff --git a/packages/web/src/scss/components/Navigation/index.html b/packages/web/src/scss/components/Navigation/index.html
index 678d882126..346d9b3ff3 100644
--- a/packages/web/src/scss/components/Navigation/index.html
+++ b/packages/web/src/scss/components/Navigation/index.html
@@ -4,12 +4,12 @@
 
   <div class="Container">
 
-    <h2 class="docs-Heading">Navigation</h2>
+    <h2 class="docs-Heading">Horizontal Navigation</h2>
 
     <div class="docs-Stack docs-Stack--stretch">
 
-      <div style="--spirit-header-height: 72px;">
-        <nav class="Navigation" aria-label="Main Navigation">
+      <div>
+        <nav class="Navigation Navigation--horizontal" aria-label="Main Navigation">
           <ul>
             <li class="NavigationItem NavigationItem--alignmentYCenter">
               Item
@@ -28,11 +28,35 @@ <h2 class="docs-Heading">Navigation</h2>
 
   <div class="Container">
 
-    <h2 class="docs-Heading">NavigationAction</h2>
+    <h2 class="docs-Heading">Vertical Navigation</h2>
 
     <div class="docs-Stack docs-Stack--stretch">
 
-      <nav class="Navigation" aria-label="Main Navigation">
+      <div>
+        <nav class="Navigation Navigation--vertical" aria-label="Vertical Navigation">
+          <ul>
+            <li class="NavigationItem NavigationItem--alignmentYCenter">
+              Item
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Horizontal Navigation with NavigationAction</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <nav class="Navigation Navigation--horizontal" aria-label="Horizontal Navigation with NavigationAction">
         <ul>
           <li class="NavigationItem NavigationItem--alignmentYCenter">
             <a href="#" class="NavigationAction">Link</a>
@@ -56,11 +80,68 @@ <h2 class="docs-Heading">NavigationAction</h2>
 
   <div class="Container">
 
-    <h2 class="docs-Heading">Navigation with Buttons</h2>
+    <h2 class="docs-Heading">Vertical Navigation with NavigationAction</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <nav class="Navigation Navigation--vertical" aria-label="Vertical Navigation with NavigationAction">
+        <ul>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <a href="#" class="NavigationAction">Link</a>
+          </li>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <a href="#" class="NavigationAction NavigationAction--selected" aria-current="page">Selected</a>
+          </li>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <span class="NavigationAction NavigationAction--disabled">Disabled</span>
+          </li>
+        </ul>
+      </nav>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Horizontal Navigation with Buttons</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <nav class="Navigation Navigation--horizontal" aria-label="Horizontal Navigation with Buttons">
+        <ul>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <a href="#" class="Button Button--medium Button--primary">
+              Button
+            </a>
+          </li>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <a href="#" class="Button Button--medium Button--secondary">
+              Button
+            </a>
+          </li>
+        </ul>
+      </nav>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Vertical Navigation with Buttons</h2>
 
     <div class="docs-Stack docs-Stack--stretch">
 
-      <nav class="Navigation" aria-label="Navigation with Buttons">
+      <nav class="Navigation Navigation--vertical" aria-label="Vertical Navigation with Buttons">
         <ul>
           <li class="NavigationItem NavigationItem--alignmentYCenter">
             <a href="#" class="Button Button--medium Button--primary">
@@ -81,4 +162,119 @@ <h2 class="docs-Heading">Navigation with Buttons</h2>
 
 </section>
 
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Nested Horizontal Navigation with Dropdown</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <nav class="Navigation Navigation--horizontal" aria-label="Nested Horizontal Navigation">
+        <ul>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <a href="#" class="NavigationAction">Link</a>
+          </li>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <div class="Dropdown Dropdown--alignmentXStretch Dropdown--alignmentYStretch">
+              <button
+                type="button"
+                class="NavigationAction"
+                data-spirit-toggle="dropdown"
+                data-spirit-target="#dropdown-navigation"
+                aria-expanded="false"
+                aria-controls="dropdown-navigation"
+                data-spirit-autoclose="true"
+              >
+                Dropdown
+                <svg width="20" height="20" aria-hidden="true" class="accessibility-open">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-up" />
+                </svg>
+                <svg width="20" height="20" aria-hidden="true" class="accessibility-closed">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
+                </svg>
+              </button>
+              <div class="DropdownPopover" data-spirit-placement="bottom-end" id="dropdown-navigation">
+                <ul class="list-unstyled">
+                  <li>
+                    <a href="https://www.example.com" class="Item">
+                      <span class="Item__label">My Account</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="https://www.example.com" class="Item">
+                      <span class="Item__label">Settings</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="https://www.example.com" class="Item">
+                      <span class="Item__label">Log Out</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </nav>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Nested Vertical Navigation with Collapse</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <nav class="Navigation Navigation--vertical" aria-label="Nested Vertical Navigation">
+        <ul>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <a href="#" class="NavigationAction">Link</a>
+          </li>
+          <li class="NavigationItem NavigationItem--alignmentYCenter">
+            <button
+              type="button"
+              aria-expanded="true"
+              data-spirit-toggle="collapse"
+              data-spirit-target="collapse-navigation"
+              class="NavigationAction"
+            >
+              Menu
+              <svg width="24" height="24" aria-hidden="true" class="accessibility-open">
+                <use xlink:href="/assets/icons/svg/sprite.svg#chevron-up" />
+              </svg>
+              <svg width="24" height="24" aria-hidden="true" class="accessibility-closed">
+                <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
+              </svg>
+            </button>
+            <div id="collapse-navigation" class="Collapse is-open">
+              <div class="Collapse__content">
+                <ul>
+                  <li class="NavigationItem NavigationItem--alignmentYCenter">
+                    <a href="#" class="NavigationAction">Nested Link</a>
+                  </li>
+                  <li class="NavigationItem NavigationItem--alignmentYCenter">
+                    <a href="#" class="NavigationAction NavigationAction--selected" aria-current="page">
+                      Nested Selected
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </nav>
+
+    </div>
+
+  </div>
+
+</section>
+
 {{/web/layout/default }}
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/navigation-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/navigation-chromium-linux.png
index 1463e92558..4ed442e0ca 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/navigation-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/navigation-chromium-linux.png differ