diff --git a/packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx b/packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx
index 47a18eb595..7ec31495c3 100644
--- a/packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx
+++ b/packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx
@@ -66,7 +66,6 @@ const DrawerDefault = () => {
               label="Drawer content"
               name="content"
               id="drawer-content"
-              helperText="Can contain HTML."
               value={content}
               onChange={(e) => setContent(e.currentTarget.value)}
             />
diff --git a/packages/web-react/src/components/Navigation/Navigation.tsx b/packages/web-react/src/components/Navigation/Navigation.tsx
index 4ef129f95d..b3de00a4ee 100644
--- a/packages/web-react/src/components/Navigation/Navigation.tsx
+++ b/packages/web-react/src/components/Navigation/Navigation.tsx
@@ -2,15 +2,21 @@
 
 import classNames from 'classnames';
 import React from 'react';
+import { Direction } from '../../constants';
 import { useStyleProps } from '../../hooks';
 import { SpiritNavigationProps } from '../../types';
 import { useNavigationStyleProps } from './useNavigationStyleProps';
 
+const defaultProps: Partial<SpiritNavigationProps> = {
+  direction: Direction.HORIZONTAL,
+};
+
 const Navigation = (props: SpiritNavigationProps): JSX.Element => {
-  const { children, ...restProps } = props;
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, ...restProps } = propsWithDefaults;
 
-  const { classProps } = useNavigationStyleProps();
-  const { styleProps, props: otherProps } = useStyleProps(restProps);
+  const { classProps, props: modifiedProps } = useNavigationStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   return (
     <nav {...otherProps} className={classNames(classProps.root, styleProps.className)} style={styleProps.style}>
diff --git a/packages/web-react/src/components/Navigation/README.md b/packages/web-react/src/components/Navigation/README.md
index 5a7dc1a8b3..7c80b9ab5a 100644
--- a/packages/web-react/src/components/Navigation/README.md
+++ b/packages/web-react/src/components/Navigation/README.md
@@ -12,10 +12,15 @@ It consists of a these parts:
 
 The `Navigation` is a `nav` wrapper for navigation items.
 
+The `Navigation` component can be horizontal or vertical. Use `direction` prop to set the orientation. Default direction is `horizontal`.
+
 ```jsx
 import { Navigation } from '@lmc-eu/spirit-web-react';
 
 <Navigation aria-label="Main Navigation">{/* Navigation items go here */}</Navigation>;
+<Navigation aria-label="Main Navigation" direction="vertical">
+  {/* Navigation items go here */}
+</Navigation>;
 ```
 
 It centres its children vertically, and if the children do not include `NavigationAction` components,
@@ -25,9 +30,10 @@ it will apply a gap between them.
 
 ### API
 
-| Name       | Type                                                                                    | Default | Required | Description               |
-| ---------- | --------------------------------------------------------------------------------------- | ------- | -------- | ------------------------- |
-| `children` | `ReactElement<HTMLLIElement>` \| `ReactElement<NavigationItem>` \| Array of these types | `null`  | ✓        | Content of the Navigation |
+| Name        | Type                                                                                    | Default      | Required | Description                   |
+| ----------- | --------------------------------------------------------------------------------------- | ------------ | -------- | ----------------------------- |
+| `children`  | `ReactElement<HTMLLIElement>` \| `ReactElement<NavigationItem>` \| Array of these types | `null`       | ✓        | Content of the Navigation     |
+| `direction` | [Direction dictionary][direction-dictionary]                                            | `horizontal` | ✕        | Orientation of the Navigation |
 
 The components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
@@ -146,6 +152,7 @@ With Buttons:
 </Navigation>
 ```
 
+[direction-dictionary]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#direction
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
 [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props
diff --git a/packages/web-react/src/components/Navigation/__tests__/Navigation.test.tsx b/packages/web-react/src/components/Navigation/__tests__/Navigation.test.tsx
index 01001c8993..dda6de61cd 100644
--- a/packages/web-react/src/components/Navigation/__tests__/Navigation.test.tsx
+++ b/packages/web-react/src/components/Navigation/__tests__/Navigation.test.tsx
@@ -2,8 +2,24 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
+import { Direction } from '../../../constants';
 import Navigation from '../Navigation';
 
+const dataProvider = [
+  {
+    direction: Direction.HORIZONTAL,
+    directionClassName: 'Navigation--horizontal',
+  },
+  {
+    direction: Direction.VERTICAL,
+    directionClassName: 'Navigation--vertical',
+  },
+  {
+    direction: undefined,
+    directionClassName: 'Navigation--horizontal',
+  },
+];
+
 describe('Navigation', () => {
   classNamePrefixProviderTest(Navigation, 'Navigation');
 
@@ -11,23 +27,28 @@ describe('Navigation', () => {
 
   restPropsTest(Navigation, 'nav');
 
-  beforeEach(() => {
-    render(
-      <Navigation>
-        <li>Content</li>
-      </Navigation>,
-    );
-  });
+  describe.each(dataProvider)('when direction is $direction', ({ direction, directionClassName }) => {
+    beforeEach(() => {
+      render(
+        <Navigation direction={direction}>
+          <li>Content</li>
+        </Navigation>,
+      );
+    });
 
-  it('should have default classname', () => {
-    expect(screen.getByRole('navigation')).toHaveClass('Navigation');
-  });
+    it('should have default classname', () => {
+      const navigation = screen.getByRole('navigation');
 
-  it('should render list and children', () => {
-    expect(screen.getByRole('list')).toBeInTheDocument();
-  });
+      expect(navigation).toHaveClass('Navigation');
+      expect(navigation).toHaveClass(directionClassName);
+    });
+
+    it('should render list and children', () => {
+      expect(screen.getByRole('list')).toBeInTheDocument();
+    });
 
-  it('should render children', () => {
-    expect(screen.getByText('Content')).toBeInTheDocument();
+    it('should render children', () => {
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/web-react/src/components/Navigation/__tests__/useNavigationStyleProps.test.ts b/packages/web-react/src/components/Navigation/__tests__/useNavigationStyleProps.test.ts
index 9cd038b017..b45a418785 100644
--- a/packages/web-react/src/components/Navigation/__tests__/useNavigationStyleProps.test.ts
+++ b/packages/web-react/src/components/Navigation/__tests__/useNavigationStyleProps.test.ts
@@ -1,12 +1,14 @@
 import { renderHook } from '@testing-library/react';
+import { Direction } from '../../../constants';
 import { SpiritNavigationActionProps } from '../../../types';
 import { useNavigationStyleProps } from '../useNavigationStyleProps';
 
 describe('useNavigationStyleProps', () => {
   it('should return defaults', () => {
-    const { result } = renderHook(() => useNavigationStyleProps());
+    const props: SpiritNavigationActionProps = {};
+    const { result } = renderHook(() => useNavigationStyleProps(props));
 
-    expect(result.current.classProps.root).toBe('Navigation');
+    expect(result.current.classProps.root).toBe('Navigation Navigation--horizontal');
     expect(result.current.classProps.action).toBe('NavigationAction');
     expect(result.current.classProps.item).toBe('NavigationItem NavigationItem--alignmentYCenter');
   });
@@ -31,4 +33,11 @@ describe('useNavigationStyleProps', () => {
 
     expect(result.current.classProps.item).toBe('NavigationItem NavigationItem--alignmentYStretch');
   });
+
+  it('should return if navigation is vertical', () => {
+    const props = { direction: Direction.VERTICAL };
+    const { result } = renderHook(() => useNavigationStyleProps(props));
+
+    expect(result.current.classProps.root).toBe('Navigation Navigation--vertical');
+  });
 });
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationDefault.tsx b/packages/web-react/src/components/Navigation/demo/NavigationHorizontal.tsx
similarity index 76%
rename from packages/web-react/src/components/Navigation/demo/NavigationDefault.tsx
rename to packages/web-react/src/components/Navigation/demo/NavigationHorizontal.tsx
index 9792166066..493f8c68b2 100644
--- a/packages/web-react/src/components/Navigation/demo/NavigationDefault.tsx
+++ b/packages/web-react/src/components/Navigation/demo/NavigationHorizontal.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import Navigation from '../Navigation';
 import NavigationItem from '../NavigationItem';
 
-const NavigationDefault = () => {
+const NavigationHorizontal = () => {
   return (
     <Navigation aria-label="Main Navigation">
       <NavigationItem>Item</NavigationItem>
     </Navigation>
   );
 };
-export default NavigationDefault;
+export default NavigationHorizontal;
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationAction.tsx b/packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithAction.tsx
similarity index 87%
rename from packages/web-react/src/components/Navigation/demo/NavigationAction.tsx
rename to packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithAction.tsx
index 3fac3e1a8e..d444cce327 100644
--- a/packages/web-react/src/components/Navigation/demo/NavigationAction.tsx
+++ b/packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithAction.tsx
@@ -3,7 +3,7 @@ import Navigation from '../Navigation';
 import NavigationAction from '../NavigationAction';
 import NavigationItem from '../NavigationItem';
 
-const NavigationDefault = () => {
+const NavigationHorizontalWithAction = () => {
   return (
     <Navigation aria-label="Main Navigation">
       <NavigationItem>
@@ -22,4 +22,4 @@ const NavigationDefault = () => {
     </Navigation>
   );
 };
-export default NavigationDefault;
+export default NavigationHorizontalWithAction;
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationButtons.tsx b/packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithButtons.tsx
similarity index 83%
rename from packages/web-react/src/components/Navigation/demo/NavigationButtons.tsx
rename to packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithButtons.tsx
index cb0cb2f749..d9bbb1f126 100644
--- a/packages/web-react/src/components/Navigation/demo/NavigationButtons.tsx
+++ b/packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithButtons.tsx
@@ -3,7 +3,7 @@ import { ButtonLink } from '../../ButtonLink';
 import Navigation from '../Navigation';
 import NavigationItem from '../NavigationItem';
 
-const NavigationDefault = () => {
+const NavigationHorizontalWithButtons = () => {
   return (
     <Navigation aria-label="Navigation with Buttons">
       <NavigationItem>
@@ -17,4 +17,4 @@ const NavigationDefault = () => {
     </Navigation>
   );
 };
-export default NavigationDefault;
+export default NavigationHorizontalWithButtons;
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithDropdown.tsx b/packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithDropdown.tsx
new file mode 100644
index 0000000000..d134eadb30
--- /dev/null
+++ b/packages/web-react/src/components/Navigation/demo/NavigationHorizontalWithDropdown.tsx
@@ -0,0 +1,55 @@
+import React, { ElementType, forwardRef } from 'react';
+import { PolymorphicRef, SpiritNavigationActionProps } from '../../../types';
+import Dropdown from '../../Dropdown/Dropdown';
+import DropdownPopover from '../../Dropdown/DropdownPopover';
+import DropdownTrigger from '../../Dropdown/DropdownTrigger';
+import { Icon } from '../../Icon';
+import { Item } from '../../Item';
+import Navigation from '../Navigation';
+import NavigationAction from '../NavigationAction';
+import NavigationItem from '../NavigationItem';
+
+/* We need an exception for components exported with forwardRef */
+/* eslint no-underscore-dangle: ['error', { allow: ['_NavigationActionAsDropdownTrigger'] }] */
+const _NavigationActionAsDropdownTrigger = <E extends ElementType = 'a'>(
+  props: SpiritNavigationActionProps<E>,
+  ref: PolymorphicRef<E>,
+): JSX.Element => {
+  return <NavigationAction ref={ref} {...props} elementType="button" />;
+};
+
+const NavigationActionAsDropdownTrigger = forwardRef<HTMLButtonElement, SpiritNavigationActionProps<ElementType>>(
+  _NavigationActionAsDropdownTrigger,
+);
+
+const NavigationHorizontalWithDropdown = () => {
+  const [isNavigationActionDropdownOpen, setIsNavigationActionDropdownOpen] = React.useState(false);
+
+  return (
+    <Navigation aria-label="Main Navigation">
+      <NavigationItem>
+        <NavigationAction href="/">Link</NavigationAction>
+      </NavigationItem>
+      <NavigationItem>
+        <Dropdown
+          alignmentX="stretch"
+          alignmentY="stretch"
+          id="dropdown-navigation"
+          isOpen={isNavigationActionDropdownOpen}
+          onToggle={() => setIsNavigationActionDropdownOpen(!isNavigationActionDropdownOpen)}
+        >
+          <DropdownTrigger elementType={NavigationActionAsDropdownTrigger as unknown as HTMLButtonElement}>
+            Dropdown
+            <Icon name={`chevron-${isNavigationActionDropdownOpen ? 'up' : 'down'}`} boxSize={20} />
+          </DropdownTrigger>
+          <DropdownPopover>
+            <Item elementType="a" href="#" label="My Account" />
+            <Item elementType="a" href="#" label="Settings" />
+            <Item elementType="a" href="#" label="Log out" />
+          </DropdownPopover>
+        </Dropdown>
+      </NavigationItem>
+    </Navigation>
+  );
+};
+export default NavigationHorizontalWithDropdown;
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationVertical.tsx b/packages/web-react/src/components/Navigation/demo/NavigationVertical.tsx
new file mode 100644
index 0000000000..1165f54837
--- /dev/null
+++ b/packages/web-react/src/components/Navigation/demo/NavigationVertical.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Navigation from '../Navigation';
+import NavigationItem from '../NavigationItem';
+
+const NavigationVertical = () => {
+  return (
+    <Navigation aria-label="Main Navigation" direction="vertical">
+      <NavigationItem>Item</NavigationItem>
+    </Navigation>
+  );
+};
+export default NavigationVertical;
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithAction.tsx b/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithAction.tsx
new file mode 100644
index 0000000000..1daf362eed
--- /dev/null
+++ b/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithAction.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Navigation from '../Navigation';
+import NavigationAction from '../NavigationAction';
+import NavigationItem from '../NavigationItem';
+
+const NavigationVerticalWithAction = () => {
+  return (
+    <Navigation aria-label="Main Navigation" direction="vertical">
+      <NavigationItem>
+        <NavigationAction href="/">Link</NavigationAction>
+      </NavigationItem>
+      <NavigationItem>
+        <NavigationAction href="/" aria-current="page" isSelected>
+          Selected
+        </NavigationAction>
+      </NavigationItem>
+      <NavigationItem>
+        <NavigationAction href="/" isDisabled>
+          Disabled
+        </NavigationAction>
+      </NavigationItem>
+    </Navigation>
+  );
+};
+export default NavigationVerticalWithAction;
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithButtons.tsx b/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithButtons.tsx
new file mode 100644
index 0000000000..5b5833e82e
--- /dev/null
+++ b/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithButtons.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import Navigation from '../Navigation';
+import NavigationItem from '../NavigationItem';
+
+const NavigationVerticalWithButtons = () => {
+  return (
+    <Navigation aria-label="Navigation with Buttons" direction="vertical">
+      <NavigationItem>
+        <ButtonLink href="#">Button</ButtonLink>
+      </NavigationItem>
+      <NavigationItem>
+        <ButtonLink href="#" color="secondary">
+          Button
+        </ButtonLink>
+      </NavigationItem>
+    </Navigation>
+  );
+};
+export default NavigationVerticalWithButtons;
diff --git a/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithCollapse.tsx b/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithCollapse.tsx
new file mode 100644
index 0000000000..6c9a544767
--- /dev/null
+++ b/packages/web-react/src/components/Navigation/demo/NavigationVerticalWithCollapse.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Collapse, useCollapse } from '../../Collapse';
+import { Icon } from '../../Icon';
+import Navigation from '../Navigation';
+import NavigationAction from '../NavigationAction';
+import NavigationItem from '../NavigationItem';
+
+const NavigationVerticalWithCollapse = () => {
+  const { isOpen, toggleHandler } = useCollapse(true);
+
+  return (
+    <Navigation aria-label="Vertical Navigation With Collapse" direction="vertical">
+      <NavigationItem>
+        <NavigationAction href="/">Link</NavigationAction>
+      </NavigationItem>
+      <NavigationItem>
+        <NavigationAction elementType="button" onClick={toggleHandler} aria-expanded="true" isSelected>
+          Menu
+          <Icon name={`chevron-${isOpen ? 'up' : 'down'}`} size="small" />
+        </NavigationAction>
+        <Collapse id="collapse-navigation" isOpen={isOpen}>
+          <ul>
+            <NavigationItem>
+              <NavigationAction href="/">Nested Link</NavigationAction>
+            </NavigationItem>
+            <NavigationItem>
+              <NavigationAction href="/" isSelected aria-current="page">
+                Nested Selected
+              </NavigationAction>
+            </NavigationItem>
+          </ul>
+        </Collapse>
+      </NavigationItem>
+    </Navigation>
+  );
+};
+export default NavigationVerticalWithCollapse;
diff --git a/packages/web-react/src/components/Navigation/demo/index.tsx b/packages/web-react/src/components/Navigation/demo/index.tsx
index 8cb45a6003..4548e27109 100644
--- a/packages/web-react/src/components/Navigation/demo/index.tsx
+++ b/packages/web-react/src/components/Navigation/demo/index.tsx
@@ -1,20 +1,48 @@
+// Because there is no `dist` directory during the CI run
+/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
+// @ts-ignore: No declaration file -- @see https://jira.almacareer.tech/browse/DS-561
+import icons from '@lmc-eu/spirit-icons/icons';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
-import NavigationAction from './NavigationAction';
-import NavigationButtons from './NavigationButtons';
-import NavigationDefault from './NavigationDefault';
+import { IconsProvider } from '../../../context';
+import NavigationHorizontal from './NavigationHorizontal';
+import NavigationHorizontalWithAction from './NavigationHorizontalWithAction';
+import NavigationHorizontalWithButtons from './NavigationHorizontalWithButtons';
+import NavigationHorizontalWithDropdown from './NavigationHorizontalWithDropdown';
+import NavigationVertical from './NavigationVertical';
+import NavigationVerticalWithAction from './NavigationVerticalWithAction';
+import NavigationVerticalWithButtons from './NavigationVerticalWithButtons';
+import NavigationVerticalWithCollapse from './NavigationVerticalWithCollapse';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <DocsSection title="Navigation" stackAlignment="stretch">
-      <NavigationDefault />
-    </DocsSection>
-    <DocsSection title="NavigationAction" stackAlignment="stretch">
-      <NavigationAction />
-    </DocsSection>
-    <DocsSection title="Navigation with Buttons" stackAlignment="stretch">
-      <NavigationButtons />
-    </DocsSection>
+    <IconsProvider value={icons}>
+      <DocsSection title="Horizontal Navigation" stackAlignment="stretch">
+        <NavigationHorizontal />
+      </DocsSection>
+      <DocsSection title="Vertical Navigation" stackAlignment="stretch">
+        <NavigationVertical />
+      </DocsSection>
+      <DocsSection title="Horizontal Navigation with NavigationAction" stackAlignment="stretch">
+        <NavigationHorizontalWithAction />
+      </DocsSection>
+      <DocsSection title="Vertical Navigation with NavigationAction" stackAlignment="stretch">
+        <NavigationVerticalWithAction />
+      </DocsSection>
+      <DocsSection title="Horizontal Navigation with Buttons" stackAlignment="stretch">
+        <NavigationHorizontalWithButtons />
+      </DocsSection>
+      <DocsSection title="Vertical Navigation with Buttons" stackAlignment="stretch">
+        <NavigationVerticalWithButtons />
+      </DocsSection>
+      <DocsSection title="Nested Horizontal Navigation with Dropdown" stackAlignment="stretch">
+        <NavigationHorizontalWithDropdown />
+      </DocsSection>
+      <DocsSection title="Nested Vertical Navigation with Collapse" stackAlignment="stretch">
+        <NavigationVerticalWithCollapse />
+      </DocsSection>
+    </IconsProvider>
   </React.StrictMode>,
 );
diff --git a/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx
index ae62db980f..c86195a501 100644
--- a/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx
+++ b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx
@@ -1,6 +1,7 @@
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { Direction } from '../../../constants';
 import Navigation from '../Navigation';
 import NavigationAction from '../NavigationAction';
 import NavigationItem from '../NavigationItem';
@@ -18,6 +19,13 @@ const meta: Meta<typeof Navigation> = {
     children: {
       control: 'object',
     },
+    direction: {
+      control: 'select',
+      options: [...Object.values(Direction)],
+      table: {
+        defaultValue: { summary: Direction.HORIZONTAL },
+      },
+    },
   },
   args: {
     children: (
@@ -32,6 +40,7 @@ const meta: Meta<typeof Navigation> = {
         </NavigationItem>
       </>
     ),
+    direction: Direction.HORIZONTAL,
   },
 };
 
diff --git a/packages/web-react/src/components/Navigation/useNavigationStyleProps.ts b/packages/web-react/src/components/Navigation/useNavigationStyleProps.ts
index 970d1e3bc0..2f5cf4e409 100644
--- a/packages/web-react/src/components/Navigation/useNavigationStyleProps.ts
+++ b/packages/web-react/src/components/Navigation/useNavigationStyleProps.ts
@@ -1,16 +1,18 @@
 import classNames from 'classnames';
-import { AlignmentYExtended } from '../../constants';
+import { AlignmentYExtended, Direction } from '../../constants';
 import { AlignmentPropertyType, useAlignmentClass, useClassNamePrefix } from '../../hooks';
 import {
+  DirectionDictionaryType,
   SpiritNavigationActionProps,
   SpiritNavigationItemAlignmentYType,
   SpiritNavigationItemProps,
 } from '../../types';
 
 export interface UseNavigationStyleProps {
+  alignmentY?: SpiritNavigationItemAlignmentYType;
+  direction?: DirectionDictionaryType;
   isDisabled?: boolean;
   isSelected?: boolean;
-  alignmentY?: SpiritNavigationItemAlignmentYType;
 }
 
 export interface UseNavigationStyleReturn {
@@ -26,12 +28,14 @@ export const useNavigationStyleProps = ({
   isDisabled = false,
   isSelected = false,
   alignmentY = AlignmentYExtended.CENTER,
+  direction = Direction.HORIZONTAL,
   ...restProps
-}: UseNavigationStyleProps = {}): UseNavigationStyleReturn => {
+}: UseNavigationStyleProps): UseNavigationStyleReturn => {
   const navigationClass = useClassNamePrefix('Navigation');
-  const navigationActionClass = useClassNamePrefix('NavigationAction');
-  const navigationItemClass = useClassNamePrefix('NavigationItem');
+  const navigationActionClass = `${navigationClass}Action`;
+  const navigationItemClass = `${navigationClass}Item`;
 
+  const navigationDirectionClass = `${navigationClass}--${direction}`;
   const navigationActionDisabledClass = `${navigationActionClass}--disabled`;
   const navigationActionSelectedClass = `${navigationActionClass}--selected`;
 
@@ -40,7 +44,7 @@ export const useNavigationStyleProps = ({
   });
 
   const classProps = {
-    root: navigationClass,
+    root: classNames(navigationClass, navigationDirectionClass),
     action: classNames(navigationActionClass, {
       [navigationActionDisabledClass]: isDisabled,
       [navigationActionSelectedClass]: isSelected,
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx
index f7975a5edb..a08681ed15 100644
--- a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx
@@ -1,136 +1,46 @@
-import React from 'react';
-import { SpiritNavigationActionProps } from '../../../types';
-import { Button } from '../../Button';
-import { ButtonLink } from '../../ButtonLink';
+import React, { useState } from 'react';
 import { Container } from '../../Container';
-import { Dropdown, DropdownPopover, DropdownTrigger } from '../../Dropdown';
+import { Drawer, DrawerCloseButton, DrawerPanel } from '../../Drawer';
 import { Flex } from '../../Flex';
-import { Icon } from '../../Icon';
-import { Item } from '../../Item';
-import { Navigation, NavigationAction, NavigationItem } from '../../Navigation';
 import { ProductLogo } from '../../ProductLogo';
 import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault';
-import { Text } from '../../Text';
-import { UNSTABLE_Avatar } from '../../UNSTABLE_Avatar';
+import { Stack } from '../../Stack';
 import UNSTABLE_Header from '../UNSTABLE_Header';
 import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo';
+import {
+  MainNavigation,
+  SecondaryHorizontalNavigation,
+  SecondaryVerticalNavigation,
+} from './HeaderWithNavigation/index';
 
-const NavigationActionAsDropdownTrigger = (props: SpiritNavigationActionProps) => (
-  <NavigationAction {...props} elementType="button" />
-);
-const AvatarButtonAsDropdownTrigger = (props: SpiritNavigationActionProps) => (
-  <button {...props} className="button-unstyled" type="button" />
-);
-
-const HeaderDefault = () => {
-  const [isNavigationActionDropdownOpen, setIsNavigationActionDropdownOpen] = React.useState(false);
-  const [isAvatarDropdownOpen, setIsAvatarDropdownOpen] = React.useState(false);
+const HeaderWithNavigation = () => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
 
   return (
-    <UNSTABLE_Header>
-      <Container>
-        <Flex alignmentX="left" alignmentY="stretch" spacing="space-1000">
-          <UNSTABLE_HeaderLogo href="#">
-            <ProductLogo>{defaultSvgLogo}</ProductLogo>
-          </UNSTABLE_HeaderLogo>
-          <Navigation aria-label="Main Navigation">
-            <NavigationItem>
-              <NavigationAction href="#">Link</NavigationAction>
-            </NavigationItem>
-            <NavigationItem>
-              <NavigationAction href="#" isSelected>
-                Selected
-              </NavigationAction>
-            </NavigationItem>
-            <NavigationItem>
-              <Dropdown
-                alignmentX="stretch"
-                alignmentY="stretch"
-                id="navigation-action-dropdown"
-                isOpen={isNavigationActionDropdownOpen}
-                onToggle={() => setIsNavigationActionDropdownOpen(!isNavigationActionDropdownOpen)}
-                placement="bottom-end"
-              >
-                <DropdownTrigger elementType={NavigationActionAsDropdownTrigger as unknown as HTMLButtonElement}>
-                  Dropdown
-                  <Icon name="chevron-up" boxSize={20} UNSAFE_className="accessibility-open" />
-                  <Icon name="chevron-down" boxSize={20} UNSAFE_className="accessibility-closed" />
-                </DropdownTrigger>
-                <DropdownPopover>
-                  <ul className="list-unstyled">
-                    <li>
-                      <Item label="My Account" href="https://www.example.com" />
-                    </li>
-                    <li>
-                      <Item label="Settings" href="https://www.example.com" />
-                    </li>
-                    <li>
-                      <Item label="Log Out" href="https://www.example.com" />
-                    </li>
-                  </ul>
-                </DropdownPopover>
-              </Dropdown>
-            </NavigationItem>
-            <NavigationItem>
-              <NavigationAction href="#" isDisabled>
-                Disabled
-              </NavigationAction>
-            </NavigationItem>
-          </Navigation>
-          <Navigation marginLeft="auto" aria-label="Secondary Navigation">
-            <NavigationItem>
-              <Button color="tertiary" isSymmetrical>
-                <Icon name="search" />
-              </Button>
-            </NavigationItem>
-            <NavigationItem alignmentY="stretch">
-              <Dropdown
-                alignmentX="stretch"
-                alignmentY="stretch"
-                id="avatar-dropdown"
-                isOpen={isAvatarDropdownOpen}
-                onToggle={() => setIsAvatarDropdownOpen(!isAvatarDropdownOpen)}
-                placement="bottom-end"
-              >
-                <DropdownTrigger elementType={AvatarButtonAsDropdownTrigger as unknown as HTMLButtonElement}>
-                  <Flex spacingX="space-500" alignmentX="stretch" alignmentY="center">
-                    <UNSTABLE_Avatar isSquare aria-label="Profile of Jiří Bárta">
-                      <Icon name="profile" boxSize={20} />
-                    </UNSTABLE_Avatar>
-                    <Text elementType="span" size="small" emphasis="semibold" UNSAFE_className="text-primary">
-                      My Account
-                    </Text>
-                    <Icon name="chevron-up" boxSize={20} UNSAFE_className="accessibility-open" />
-                    <Icon name="chevron-down" boxSize={20} UNSAFE_className="accessibility-closed" />
-                  </Flex>
-                </DropdownTrigger>
-                <DropdownPopover>
-                  <ul className="list-unstyled">
-                    <li>
-                      <Item label="My Account" href="https://www.example.com" />
-                    </li>
-                    <li>
-                      <Item label="Settings" href="https://www.example.com" />
-                    </li>
-                    <li>
-                      <Item label="Log Out" href="https://www.example.com" />
-                    </li>
-                  </ul>
-                </DropdownPopover>
-              </Dropdown>
-            </NavigationItem>
-            <NavigationItem>
-              <ButtonLink href="#" color="secondary">
-                Log out
-              </ButtonLink>
-            </NavigationItem>
-            <NavigationItem>
-              <ButtonLink href="#">Post a job</ButtonLink>
-            </NavigationItem>
-          </Navigation>
-        </Flex>
-      </Container>
-    </UNSTABLE_Header>
+    <>
+      <UNSTABLE_Header>
+        <Container>
+          <Flex alignmentX="left" alignmentY="stretch" spacing="space-1000">
+            <UNSTABLE_HeaderLogo href="#">
+              <ProductLogo>{defaultSvgLogo}</ProductLogo>
+            </UNSTABLE_HeaderLogo>
+            <MainNavigation />
+            <SecondaryHorizontalNavigation handleOpenDrawer={() => setDrawerOpen(true)} />
+          </Flex>
+        </Container>
+      </UNSTABLE_Header>
+
+      <Drawer id="drawer-navigation" isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)}>
+        <DrawerPanel>
+          <DrawerCloseButton />
+          <Stack hasIntermediateDividers hasSpacing UNSAFE_className="mt-900" spacing="space-900">
+            <MainNavigation direction="vertical" />
+            <SecondaryVerticalNavigation />
+          </Stack>
+        </DrawerPanel>
+      </Drawer>
+    </>
   );
 };
-export default HeaderDefault;
+
+export default HeaderWithNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/MainNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/MainNavigation.tsx
new file mode 100644
index 0000000000..9b68927d24
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/MainNavigation.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Direction } from '../../../../constants';
+import { SpiritNavigationProps } from '../../../../types';
+import { Navigation, NavigationAction, NavigationItem } from '../../../Navigation';
+
+export const MainNavigation = ({ direction = Direction.HORIZONTAL }: Partial<SpiritNavigationProps>) => (
+  <Navigation
+    aria-label="Main Navigation"
+    direction={direction}
+    UNSAFE_className={direction === Direction.HORIZONTAL ? 'd-none d-desktop-flex' : undefined}
+  >
+    <NavigationItem>
+      <NavigationAction href="#" isSelected>
+        Job Offers
+      </NavigationAction>
+    </NavigationItem>
+    <NavigationItem>
+      <NavigationAction href="#">Magazine</NavigationAction>
+    </NavigationItem>
+  </Navigation>
+);
+
+export default MainNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryHorizontalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryHorizontalNavigation.tsx
new file mode 100644
index 0000000000..57f46e1236
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryHorizontalNavigation.tsx
@@ -0,0 +1,42 @@
+import React, { FunctionComponent } from 'react';
+import { ClickEvent } from '../../../../types';
+import { Button } from '../../../Button';
+import { ButtonLink } from '../../../ButtonLink';
+import { Icon } from '../../../Icon';
+import { Navigation, NavigationItem } from '../../../Navigation';
+
+interface SecondaryHorizontalNavigationProps {
+  handleOpenDrawer: (event: ClickEvent) => void;
+}
+
+const SecondaryHorizontalNavigation: FunctionComponent<SecondaryHorizontalNavigationProps> = ({ handleOpenDrawer }) => (
+  <Navigation marginLeft="auto" aria-label="Secondary Navigation">
+    <NavigationItem>
+      <Button color="tertiary" isSymmetrical>
+        <Icon name="search" />
+      </Button>
+    </NavigationItem>
+    <NavigationItem UNSAFE_className="d-none d-desktop-flex">
+      <ButtonLink href="#" color="secondary">
+        Log In
+      </ButtonLink>
+    </NavigationItem>
+    <NavigationItem UNSAFE_className="d-none d-desktop-flex">
+      <ButtonLink href="#">Post a Job</ButtonLink>
+    </NavigationItem>
+    <NavigationItem UNSAFE_className="d-desktop-none">
+      <Button
+        color="tertiary"
+        aria-label="Toggle Menu"
+        aria-controls="drawer-navigation"
+        aria-expanded="false"
+        onClick={handleOpenDrawer}
+        isSymmetrical
+      >
+        <Icon name="hamburger" />
+      </Button>
+    </NavigationItem>
+  </Navigation>
+);
+
+export default SecondaryHorizontalNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryVerticalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryVerticalNavigation.tsx
new file mode 100644
index 0000000000..7cdecd74a4
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryVerticalNavigation.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ButtonLink } from '../../../ButtonLink';
+import { Navigation, NavigationItem } from '../../../Navigation';
+
+const SecondaryVerticalNavigation = () => (
+  <Navigation aria-label="Secondary Navigation" direction="vertical">
+    <NavigationItem>
+      <ButtonLink href="#" color="secondary">
+        Log In
+      </ButtonLink>
+    </NavigationItem>
+    <NavigationItem>
+      <ButtonLink href="#">Post a Job</ButtonLink>
+    </NavigationItem>
+  </Navigation>
+);
+
+export default SecondaryVerticalNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/index.ts b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/index.ts
new file mode 100644
index 0000000000..da634a845a
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/index.ts
@@ -0,0 +1,5 @@
+'use client';
+
+export { default as MainNavigation } from './MainNavigation';
+export { default as SecondaryHorizontalNavigation } from './SecondaryHorizontalNavigation';
+export { default as SecondaryVerticalNavigation } from './SecondaryVerticalNavigation';
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems.tsx
new file mode 100644
index 0000000000..b3a2b512dc
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Container } from '../../Container';
+import { Drawer, DrawerCloseButton, DrawerPanel } from '../../Drawer';
+import { Flex } from '../../Flex';
+import { ProductLogo } from '../../ProductLogo';
+import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault';
+import { Stack } from '../../Stack';
+import UNSTABLE_Header from '../UNSTABLE_Header';
+import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo';
+import {
+  MainHorizontalNavigation,
+  MainVerticalNavigation,
+  ProfileNavigation,
+  SecondaryHorizontalNavigation,
+  SecondaryVerticalNavigation,
+} from './HeaderWithNavigationAndNestedItems/index';
+
+const HeaderWithNavigationAndNestedItems = () => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+
+  return (
+    <>
+      <UNSTABLE_Header>
+        <Container>
+          <Flex alignmentX="left" alignmentY="stretch" spacing="space-1000">
+            <UNSTABLE_HeaderLogo href="#">
+              <ProductLogo>{defaultSvgLogo}</ProductLogo>
+            </UNSTABLE_HeaderLogo>
+            <MainHorizontalNavigation />
+            <SecondaryHorizontalNavigation handleOpenDrawer={() => setDrawerOpen(true)} />
+          </Flex>
+        </Container>
+      </UNSTABLE_Header>
+
+      <Drawer id="drawer-navigation" isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)}>
+        <DrawerPanel>
+          <DrawerCloseButton />
+          <Stack hasIntermediateDividers hasSpacing UNSAFE_className="mt-900" spacing="space-900">
+            <ProfileNavigation />
+            <MainVerticalNavigation />
+            <SecondaryVerticalNavigation />
+          </Stack>
+        </DrawerPanel>
+      </Drawer>
+    </>
+  );
+};
+export default HeaderWithNavigationAndNestedItems;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/CollapseNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/CollapseNavigation.tsx
new file mode 100644
index 0000000000..078747a4ef
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/CollapseNavigation.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Collapse } from '../../../Collapse';
+import { NavigationAction, NavigationItem } from '../../../Navigation';
+
+const CollapseNavigation = ({ isOpen }: { isOpen: boolean }) => (
+  <Collapse id="collapse-navigation" isOpen={isOpen}>
+    <ul>
+      <NavigationItem>
+        <NavigationAction href="https://www.example.com">My Account</NavigationAction>
+      </NavigationItem>
+      <NavigationItem>
+        <NavigationAction href="https://www.example.com">Settings</NavigationAction>
+      </NavigationItem>
+      <NavigationItem>
+        <NavigationAction href="https://www.example.com">Log Out</NavigationAction>
+      </NavigationItem>
+    </ul>
+  </Collapse>
+);
+
+export default CollapseNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigation.tsx
new file mode 100644
index 0000000000..720ceabe0f
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigation.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Navigation, NavigationAction, NavigationItem } from '../../../Navigation';
+import MainHorizontalNavigationDropdown from './MainHorizontalNavigationDropdown';
+
+export const MainHorizontalNavigation = () => (
+  <Navigation aria-label="Main Navigation" UNSAFE_className="d-none d-desktop-flex">
+    <NavigationItem>
+      <NavigationAction href="#" isSelected>
+        Selected
+      </NavigationAction>
+    </NavigationItem>
+    <NavigationItem>
+      <NavigationAction href="#">Link</NavigationAction>
+    </NavigationItem>
+    <NavigationItem>
+      <MainHorizontalNavigationDropdown />
+    </NavigationItem>
+    <NavigationItem>
+      <NavigationAction href="#" isDisabled>
+        Disabled
+      </NavigationAction>
+    </NavigationItem>
+  </Navigation>
+);
+
+export default MainHorizontalNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigationDropdown.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigationDropdown.tsx
new file mode 100644
index 0000000000..b7f2e4788b
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigationDropdown.tsx
@@ -0,0 +1,58 @@
+import React, { ElementType, forwardRef, useState } from 'react';
+import { PolymorphicRef, SpiritNavigationActionProps } from '../../../../types';
+import { Dropdown, DropdownPopover, DropdownTrigger } from '../../../Dropdown';
+import { Icon } from '../../../Icon';
+import { Item } from '../../../Item';
+import { NavigationAction } from '../../../Navigation';
+
+/* We need an exception for components exported with forwardRef */
+/* eslint no-underscore-dangle: ['error', { allow: ['_NavigationActionAsDropdownTrigger'] }] */
+const _NavigationActionAsDropdownTrigger = <E extends ElementType = 'a'>(
+  props: SpiritNavigationActionProps<E>,
+  ref: PolymorphicRef<E>,
+): JSX.Element => {
+  return <NavigationAction ref={ref} {...props} elementType="button" />;
+};
+
+const NavigationActionAsDropdownTrigger = forwardRef<HTMLButtonElement, SpiritNavigationActionProps<ElementType>>(
+  _NavigationActionAsDropdownTrigger,
+);
+
+export const DropdownPopoverContent = () => (
+  <ul className="list-unstyled">
+    <li>
+      <Item label="My Account" href="https://www.example.com" />
+    </li>
+    <li>
+      <Item label="Settings" href="https://www.example.com" />
+    </li>
+    <li>
+      <Item label="Log Out" href="https://www.example.com" />
+    </li>
+  </ul>
+);
+
+const MainHorizontalNavigationDropdown = () => {
+  const [isNavigationActionDropdownOpen, setIsNavigationActionDropdownOpen] = useState(false);
+
+  return (
+    <Dropdown
+      alignmentX="stretch"
+      alignmentY="stretch"
+      id="navigation-action-dropdown"
+      isOpen={isNavigationActionDropdownOpen}
+      onToggle={() => setIsNavigationActionDropdownOpen(!isNavigationActionDropdownOpen)}
+      placement="bottom-end"
+    >
+      <DropdownTrigger elementType={NavigationActionAsDropdownTrigger as unknown as HTMLButtonElement}>
+        Menu
+        <Icon name={`chevron-${isNavigationActionDropdownOpen ? 'up' : 'down'}`} boxSize={20} />
+      </DropdownTrigger>
+      <DropdownPopover>
+        <DropdownPopoverContent />
+      </DropdownPopover>
+    </Dropdown>
+  );
+};
+
+export default MainHorizontalNavigationDropdown;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainVerticalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainVerticalNavigation.tsx
new file mode 100644
index 0000000000..01ad95cd15
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainVerticalNavigation.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useCollapse } from '../../../Collapse';
+import { Icon } from '../../../Icon';
+import { Navigation, NavigationAction, NavigationItem } from '../../../Navigation';
+import CollapseNavigation from './CollapseNavigation';
+
+const DrawerWithNavigation = () => {
+  const { isOpen: isCollapseOpen, toggleHandler: toggleCollapseHandler } = useCollapse(false);
+
+  return (
+    <Navigation aria-label="Main Navigation" direction="vertical">
+      <NavigationItem>
+        <NavigationAction href="#" isSelected>
+          Selected
+        </NavigationAction>
+      </NavigationItem>
+      <NavigationItem>
+        <NavigationAction href="#">Link</NavigationAction>
+      </NavigationItem>
+      <NavigationItem>
+        <NavigationAction elementType="button" aria-expanded={isCollapseOpen} onClick={toggleCollapseHandler}>
+          Menu
+          <Icon name={`chevron-${isCollapseOpen ? 'up' : 'down'}`} />
+        </NavigationAction>
+        <CollapseNavigation isOpen={isCollapseOpen} />
+      </NavigationItem>
+      <NavigationItem>
+        <NavigationAction href="#" isDisabled>
+          Disabled
+        </NavigationAction>
+      </NavigationItem>
+    </Navigation>
+  );
+};
+export default DrawerWithNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/ProfileNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/ProfileNavigation.tsx
new file mode 100644
index 0000000000..c80bb99939
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/ProfileNavigation.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Flex } from '../../../Flex';
+import { Icon } from '../../../Icon';
+import { Navigation, NavigationItem } from '../../../Navigation';
+import { Text } from '../../../Text';
+import { UNSTABLE_Avatar } from '../../../UNSTABLE_Avatar';
+
+const ProfileNavigation = () => (
+  <Navigation aria-label="Profile" direction="vertical">
+    <NavigationItem alignmentY="stretch">
+      <Flex spacingX="space-500" alignmentX="stretch" alignmentY="center">
+        <UNSTABLE_Avatar isSquare aria-label="Profile of Jiří Bárta">
+          <Icon name="profile" boxSize={20} />
+        </UNSTABLE_Avatar>
+        <Text elementType="span" size="small" emphasis="semibold">
+          My Account
+        </Text>
+      </Flex>
+    </NavigationItem>
+  </Navigation>
+);
+export default ProfileNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigation.tsx
new file mode 100644
index 0000000000..d3bb69d1a1
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigation.tsx
@@ -0,0 +1,46 @@
+import React, { FunctionComponent } from 'react';
+import { ClickEvent } from '../../../../types';
+import { Button } from '../../../Button';
+import { ButtonLink } from '../../../ButtonLink';
+import { Icon } from '../../../Icon';
+import { Navigation, NavigationItem } from '../../../Navigation';
+import SecondaryHorizontalNavigationDropdown from './SecondaryHorizontalNavigationDropdown';
+
+interface SecondaryHorizontalNavigationProps {
+  handleOpenDrawer: (event: ClickEvent) => void;
+}
+
+const SecondaryHorizontalNavigation: FunctionComponent<SecondaryHorizontalNavigationProps> = ({ handleOpenDrawer }) => (
+  <Navigation marginLeft="auto" aria-label="Secondary Navigation">
+    <NavigationItem>
+      <Button color="tertiary" isSymmetrical>
+        <Icon name="search" />
+      </Button>
+    </NavigationItem>
+    <NavigationItem alignmentY="stretch" UNSAFE_className="d-none d-desktop-flex">
+      <SecondaryHorizontalNavigationDropdown />
+    </NavigationItem>
+    <NavigationItem UNSAFE_className="d-none d-desktop-flex">
+      <ButtonLink href="#" color="secondary">
+        Log Out
+      </ButtonLink>
+    </NavigationItem>
+    <NavigationItem UNSAFE_className="d-none d-desktop-flex">
+      <ButtonLink href="#">Post a Job</ButtonLink>
+    </NavigationItem>
+    <NavigationItem UNSAFE_className="d-desktop-none">
+      <Button
+        color="tertiary"
+        aria-label="Toggle Menu"
+        aria-controls="drawer-navigation"
+        aria-expanded="false"
+        onClick={handleOpenDrawer}
+        isSymmetrical
+      >
+        <Icon name="hamburger" />
+      </Button>
+    </NavigationItem>
+  </Navigation>
+);
+
+export default SecondaryHorizontalNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigationDropdown.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigationDropdown.tsx
new file mode 100644
index 0000000000..2837449a17
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigationDropdown.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { SpiritNavigationActionProps } from '../../../../types';
+import { Dropdown, DropdownPopover, DropdownTrigger } from '../../../Dropdown';
+import { Flex } from '../../../Flex';
+import { Icon } from '../../../Icon';
+import { Text } from '../../../Text';
+import { UNSTABLE_Avatar } from '../../../UNSTABLE_Avatar';
+import { DropdownPopoverContent } from './MainHorizontalNavigationDropdown';
+
+const AvatarButtonAsDropdownTrigger = (props: SpiritNavigationActionProps) => (
+  <button {...props} className="button-unstyled" type="button" />
+);
+
+const SecondaryHorizontalNavigationDropdown = () => {
+  const [isAvatarDropdownOpen, setIsAvatarDropdownOpen] = useState(false);
+
+  return (
+    <Dropdown
+      alignmentX="stretch"
+      alignmentY="stretch"
+      id="avatar-dropdown"
+      isOpen={isAvatarDropdownOpen}
+      onToggle={() => setIsAvatarDropdownOpen(!isAvatarDropdownOpen)}
+      placement="bottom-end"
+    >
+      <DropdownTrigger elementType={AvatarButtonAsDropdownTrigger as unknown as HTMLButtonElement}>
+        <Flex spacingX="space-500" alignmentX="stretch" alignmentY="center">
+          <UNSTABLE_Avatar isSquare aria-label="Profile of Jiří Bárta">
+            <Icon name="profile" boxSize={20} />
+          </UNSTABLE_Avatar>
+          <Text elementType="span" size="small" emphasis="semibold">
+            My Account
+          </Text>
+          <Icon name={`chevron-${isAvatarDropdownOpen ? 'up' : 'down'}`} boxSize={20} />
+        </Flex>
+      </DropdownTrigger>
+      <DropdownPopover>
+        <DropdownPopoverContent />
+      </DropdownPopover>
+    </Dropdown>
+  );
+};
+
+export default SecondaryHorizontalNavigationDropdown;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryVerticalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryVerticalNavigation.tsx
new file mode 100644
index 0000000000..61a9374a77
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryVerticalNavigation.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ButtonLink } from '../../../ButtonLink';
+import { Navigation, NavigationItem } from '../../../Navigation';
+
+const SecondaryVerticalNavigation = () => (
+  <Navigation aria-label="Secondary Navigation" direction="vertical">
+    <NavigationItem>
+      <ButtonLink href="#" color="secondary">
+        Log Out
+      </ButtonLink>
+    </NavigationItem>
+    <NavigationItem>
+      <ButtonLink href="#">Post a Job</ButtonLink>
+    </NavigationItem>
+  </Navigation>
+);
+
+export default SecondaryVerticalNavigation;
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/index.ts b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/index.ts
new file mode 100644
index 0000000000..d2c8c6ac3c
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/index.ts
@@ -0,0 +1,10 @@
+'use client';
+
+export { default as CollapseNavigation } from './CollapseNavigation';
+export { default as MainHorizontalNavigation } from './MainHorizontalNavigation';
+export { default as MainNavigationDropdown } from './MainHorizontalNavigationDropdown';
+export { default as MainVerticalNavigation } from './MainVerticalNavigation';
+export { default as ProfileNavigation } from './ProfileNavigation';
+export { default as SecondaryHorizontalNavigation } from './SecondaryHorizontalNavigation';
+export { default as SecondaryNavigationDropdown } from './SecondaryHorizontalNavigationDropdown';
+export { default as SecondaryVerticalNavigation } from './SecondaryVerticalNavigation';
diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/index.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/index.tsx
index 2eff55e20a..91a90641c1 100644
--- a/packages/web-react/src/components/UNSTABLE_Header/demo/index.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Header/demo/index.tsx
@@ -11,6 +11,7 @@ import HeaderDefault from './HeaderDefault';
 import HeaderFluid from './HeaderFluid';
 import HeaderMinimal from './HeaderMinimal';
 import HeaderWithNavigation from './HeaderWithNavigation';
+import HeaderWithNavigationAndNestedItems from './HeaderWithNavigationAndNestedItems';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -27,6 +28,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="With Navigation" stackAlignment="stretch" container="heading-only">
         <HeaderWithNavigation />
       </DocsSection>
+      <DocsSection title="With Navigation and Nested Items" stackAlignment="stretch" container="heading-only">
+        <HeaderWithNavigationAndNestedItems />
+      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );
diff --git a/packages/web-react/src/types/navigation.ts b/packages/web-react/src/types/navigation.ts
index 78b0ece479..02522e6024 100644
--- a/packages/web-react/src/types/navigation.ts
+++ b/packages/web-react/src/types/navigation.ts
@@ -5,6 +5,7 @@ import {
   AlignmentYExtendedDictionaryType,
   AriaLabelingProps,
   ChildrenProps,
+  DirectionDictionaryType,
   SpiritPolymorphicElementPropsWithRef,
   StyleProps,
   TransferProps,
@@ -44,4 +45,5 @@ export interface SpiritNavigationProps extends StyleProps, AriaLabelingProps {
     | ReactElement<HTMLLIElement>
     | ReactElement<typeof NavigationItem>
     | Array<ReactElement<HTMLLIElement> | ReactElement<typeof NavigationItem>>;
+  direction?: DirectionDictionaryType;
 }
diff --git a/packages/web/src/scss/components/Drawer/index.html b/packages/web/src/scss/components/Drawer/index.html
index c6664537b3..778bf5d5ce 100644
--- a/packages/web/src/scss/components/Drawer/index.html
+++ b/packages/web/src/scss/components/Drawer/index.html
@@ -112,10 +112,7 @@ <h2 class="docs-Heading">Drawer</h2>
             </label>
             <div class="TextArea">
               <label for="drawer-content" class="TextArea__label">Drawer content</label>
-              <textarea aria-describedby="drawer-content__helperText" name="content" class="TextArea__input" id="drawer-content">This is a Drawer content.</textarea>
-              <div class="TextArea__helperText" id="drawer-content__helperText">
-                Can contain HTML.
-              </div>
+              <textarea name="content" class="TextArea__input" id="drawer-content">This is a Drawer content.</textarea>
             </div>
           </div>
         </fieldset>
@@ -148,7 +145,7 @@ <h2 class="docs-Heading">Drawer</h2>
               <svg width="24" height="24" aria-hidden="true">
                 <use xlink:href="/assets/icons/svg/sprite.svg#close" />
               </svg>
-                <span class="accessibility-hidden">Close</span>
+              <span class="accessibility-hidden">Close</span>
             </button>
             <div class="p-800" data-drawer-demo-content>This is a Drawer content.</div>
           </div>
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/packages/web/src/scss/components/UNSTABLE_Header/index.html b/packages/web/src/scss/components/UNSTABLE_Header/index.html
index d9507723af..989516c7e7 100644
--- a/packages/web/src/scss/components/UNSTABLE_Header/index.html
+++ b/packages/web/src/scss/components/UNSTABLE_Header/index.html
@@ -87,14 +87,130 @@ <h2 class="docs-Heading">With Navigation</h2>
             </div>
           </a>
 
-          <nav class="Navigation" aria-label="Main Navigation">
+          <nav class="Navigation Navigation--horizontal d-none d-desktop-flex" aria-label="Main Navigation">
             <ul>
               <li class="NavigationItem NavigationItem--alignmentYCenter">
-                <a href="#" class="NavigationAction">Link</a>
+                <a href="#" class="NavigationAction NavigationAction--selected" aria-current="page">Job Offers</a>
               </li>
+              <li class="NavigationItem NavigationItem--alignmentYCenter">
+                <a href="#" class="NavigationAction">Magazine</a>
+              </li>
+            </ul>
+          </nav>
+
+          <nav class="Navigation Navigation--horizontal ml-auto" aria-label="Secondary Navigation">
+            <ul>
+              <li class="NavigationItem NavigationItem--alignmentYCenter">
+                <button class="Button Button--tertiary Button--medium Button--symmetrical" type="button" aria-label="Search">
+                  <svg width="24" height="24" aria-hidden="true">
+                    <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                  </svg>
+                </button>
+              </li>
+              <li class="NavigationItem NavigationItem--alignmentYCenter d-none d-desktop-flex">
+                <a href="#" class="Button Button--secondary Button--medium">Log In</a>
+              </li>
+              <li class="NavigationItem NavigationItem--alignmentYCenter d-none d-desktop-flex">
+                <a href="#" class="Button Button--primary Button--medium">Post a Job</a>
+              </li>
+              <li class="NavigationItem NavigationItem--alignmentYCenter d-desktop-none">
+                <button
+                  class="Button Button--tertiary Button--medium Button--symmetrical"
+                  type="button"
+                  aria-label="Toggle Menu"
+                  data-spirit-toggle="offcanvas"
+                  data-spirit-target="#drawer-navigation"
+                  aria-controls="drawer-navigation"
+                  aria-expanded="false"
+                >
+                  <svg width="24" height="24" aria-hidden="true">
+                    <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
+                  </svg>
+                </button>
+              </li>
+            </ul>
+          </nav>
+
+        </div>
+      </div>
+    </header>
+
+    <dialog id="drawer-navigation" class="Drawer Drawer--right" aria-label="Navigation">
+      <div class="DrawerPanel">
+        <div class="DrawerPanel__content">
+          <button
+            type="button"
+            aria-expanded="false"
+            class="Button Button--tertiary Button--medium Button--symmetrical DrawerCloseButton"
+            data-spirit-dismiss="offcanvas"
+            data-spirit-target="#drawer-navigation"
+            aria-controls="drawer-navigation"
+          >
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
+          </button>
+          <div class="Stack Stack--hasSpacing Stack--hasIntermediateDividers mt-900" style="--stack-spacing: var(--spirit-space-900)">
+
+            <nav class="Navigation Navigation--vertical" aria-label="Main Navigation">
+              <ul>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="NavigationAction NavigationAction--selected" aria-current="page">Job Offers</a>
+                </li>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="NavigationAction">Magazine</a>
+                </li>
+              </ul>
+            </nav>
+
+            <nav class="Navigation Navigation--vertical" aria-label="Secondary Navigation">
+              <ul>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="Button Button--secondary Button--medium">Log in</a>
+                </li>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="Button Button--primary Button--medium">Post a Job</a>
+                </li>
+              </ul>
+            </nav>
+
+          </div>
+        </div>
+      </div>
+    </dialog>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">With Navigation and Nested Items</h2>
+  </div>
+
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="Container">
+        <div
+          class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYStretch"
+          style="--flex-spacing-x: var(--spirit-space-1000);"
+        >
+          <a href="#" aria-label="JobBoard homepage" class="UNSTABLE_HeaderLogo">
+            <div class="ProductLogo">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </a>
+
+          <nav class="Navigation Navigation--horizontal d-none d-desktop-flex" aria-label="Main Navigation">
+            <ul>
               <li class="NavigationItem NavigationItem--alignmentYCenter">
                 <a href="#" class="NavigationAction NavigationAction--selected" aria-current="page">Selected</a>
               </li>
+              <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
@@ -106,7 +222,7 @@ <h2 class="docs-Heading">With Navigation</h2>
                     aria-controls="dropdown-navigation"
                     data-spirit-autoclose="true"
                   >
-                    Dropdown
+                    Menu
                     <svg width="20" height="20" aria-hidden="true" class="accessibility-open">
                       <use xlink:href="/assets/icons/svg/sprite.svg#chevron-up" />
                     </svg>
@@ -141,7 +257,7 @@ <h2 class="docs-Heading">With Navigation</h2>
             </ul>
           </nav>
 
-          <nav class="Navigation ml-auto" aria-label="Secondary Navigation">
+          <nav class="Navigation Navigation--horizontal ml-auto" aria-label="Secondary Navigation">
             <ul>
               <li class="NavigationItem NavigationItem--alignmentYCenter">
                 <button class="Button Button--tertiary Button--medium Button--symmetrical">
@@ -150,7 +266,7 @@ <h2 class="docs-Heading">With Navigation</h2>
                   </svg>
                 </button>
               </li>
-              <li class="NavigationItem NavigationItem--alignmentYStretch">
+              <li class="NavigationItem NavigationItem--alignmentYStretch d-none d-desktop-flex">
                 <div class="Dropdown Dropdown--alignmentXStretch Dropdown--alignmentYStretch">
                   <button
                     type="button"
@@ -167,7 +283,7 @@ <h2 class="docs-Heading">With Navigation</h2>
                           <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
                         </svg>
                       </span>
-                      <span class="typography-body-small-semibold text-primary">My Account</span>
+                      <span class="typography-body-small-semibold">My Account</span>
                       <svg width="20" height="20" aria-hidden="true" class="accessibility-open">
                         <use xlink:href="/assets/icons/svg/sprite.svg#chevron-up" />
                       </svg>
@@ -197,11 +313,26 @@ <h2 class="docs-Heading">With Navigation</h2>
                   </div>
                 </div>
               </li>
-              <li class="NavigationItem NavigationItem--alignmentYCenter">
-                <a href="#" class="Button Button--secondary Button--medium">Log out</a>
+              <li class="NavigationItem NavigationItem--alignmentYCenter d-none d-desktop-flex">
+                <a href="#" class="Button Button--secondary Button--medium">Log Out</a>
               </li>
-              <li class="NavigationItem NavigationItem--alignmentYCenter">
-                <a href="#" class="Button Button--primary Button--medium">Post a job</a>
+              <li class="NavigationItem NavigationItem--alignmentYCenter d-none d-desktop-flex">
+                <a href="#" class="Button Button--primary Button--medium">Post a Job</a>
+              </li>
+              <li class="NavigationItem NavigationItem--alignmentYCenter d-desktop-none">
+                <button
+                  class="Button Button--tertiary Button--medium Button--symmetrical"
+                  type="button"
+                  aria-label="Toggle Menu"
+                  data-spirit-toggle="offcanvas"
+                  data-spirit-target="#drawer-navigation-expanded"
+                  aria-controls="drawer-navigation-expanded"
+                  aria-expanded="false"
+                >
+                  <svg width="24" height="24" aria-hidden="true">
+                    <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
+                  </svg>
+                </button>
               </li>
             </ul>
           </nav>
@@ -210,6 +341,102 @@ <h2 class="docs-Heading">With Navigation</h2>
       </div>
     </header>
 
+    <dialog id="drawer-navigation-expanded" class="Drawer Drawer--right" aria-label="Navigation">
+      <div class="DrawerPanel">
+        <div class="DrawerPanel__content">
+          <button
+            type="button"
+            aria-expanded="false"
+            class="Button Button--tertiary Button--medium Button--symmetrical DrawerCloseButton"
+            data-spirit-dismiss="offcanvas"
+            data-spirit-target="#drawer-navigation-expanded"
+            aria-controls="drawer-navigation-expanded"
+          >
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
+          </button>
+          <div class="Stack Stack--hasSpacing Stack--hasIntermediateDividers mt-900" style="--stack-spacing: var(--spirit-space-900)">
+
+            <nav class="Navigation Navigation--vertical" aria-label="Profile">
+              <ul>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYCenter" style="--flex-spacing-x: var(--spirit-space-500)">
+                    <span class="UNSTABLE_Avatar UNSTABLE_Avatar--medium UNSTABLE_Avatar--square" aria-label="Profile of Jiří Bárta">
+                      <svg width="20" height="20" aria-hidden="true">
+                        <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
+                      </svg>
+                    </span>
+                    <span class="typography-body-small-semibold text-primary">My Account</span>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+
+
+            <nav class="Navigation Navigation--vertical" aria-label="Main Navigation">
+              <ul>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="NavigationAction NavigationAction--selected" aria-current="page">Selected</a>
+                </li>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="NavigationAction">Link</a>
+                </li>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <button
+                    type="button"
+                    aria-expanded="false"
+                    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">
+                    <div class="Collapse__content">
+                      <ul>
+                        <li class="NavigationItem NavigationItem--alignmentYCenter">
+                          <a href="https://www.example.com" class="NavigationAction">My Account</a>
+                        </li>
+                        <li class="NavigationItem NavigationItem--alignmentYCenter">
+                          <a href="https://www.example.com" class="NavigationAction">Settings</a>
+                        </li>
+                        <li class="NavigationItem NavigationItem--alignmentYCenter">
+                          <a href="https://www.example.com" class="NavigationAction">Log Out</a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </li>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <span class="NavigationAction NavigationAction--disabled">Disabled</span>
+                </li>
+              </ul>
+            </nav>
+
+            <nav class="Navigation Navigation--vertical" aria-label="Secondary Navigation">
+              <ul>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="Button Button--secondary Button--medium">Log Out</a>
+                </li>
+                <li class="NavigationItem NavigationItem--alignmentYCenter">
+                  <a href="#" class="Button Button--primary Button--medium">Post a Job</a>
+                </li>
+              </ul>
+            </nav>
+
+          </div>
+        </div>
+      </div>
+    </dialog>
+
   </div>
 </section>
 
diff --git a/packages/web/src/scss/helpers/accessibility/_accessibility.scss b/packages/web/src/scss/helpers/accessibility/_accessibility.scss
index 8f794c2332..cea5745e59 100644
--- a/packages/web/src/scss/helpers/accessibility/_accessibility.scss
+++ b/packages/web/src/scss/helpers/accessibility/_accessibility.scss
@@ -1,15 +1,24 @@
+@use '@tokens' as tokens;
 @use '../../tools/accessibility';
 
 .accessibility-hidden {
     @include accessibility.hide-text();
 }
 
-[aria-expanded='true'] .accessibility-open,
-[aria-expanded='false'] .accessibility-closed {
-    display: initial;
+[aria-expanded='true'] {
+    --#{tokens.$css-variable-prefix}accessibility-expanded-open-display: initial;
+    --#{tokens.$css-variable-prefix}accessibility-expanded-closed-display: none;
 }
 
-[aria-expanded='false'] .accessibility-open,
-[aria-expanded='true'] .accessibility-closed {
-    display: none;
+[aria-expanded='false'] {
+    --#{tokens.$css-variable-prefix}accessibility-expanded-open-display: none;
+    --#{tokens.$css-variable-prefix}accessibility-expanded-closed-display: initial;
+}
+
+[aria-expanded] .accessibility-open {
+    display: var(--#{tokens.$css-variable-prefix}accessibility-expanded-open-display);
+}
+
+[aria-expanded] .accessibility-closed {
+    display: var(--#{tokens.$css-variable-prefix}accessibility-expanded-closed-display);
 }
diff --git a/tests/e2e/components/demo-drawer-compare.spec.ts-snapshots/drawer-right-backdrop-click--chromium-linux.png b/tests/e2e/components/demo-drawer-compare.spec.ts-snapshots/drawer-right-backdrop-click--chromium-linux.png
index 97e2a0001e..f93bd6cf0e 100644
Binary files a/tests/e2e/components/demo-drawer-compare.spec.ts-snapshots/drawer-right-backdrop-click--chromium-linux.png and b/tests/e2e/components/demo-drawer-compare.spec.ts-snapshots/drawer-right-backdrop-click--chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/drawer-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/drawer-chromium-linux.png
index e089f47f97..ebe44e31b8 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/drawer-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/drawer-chromium-linux.png differ
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
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-header-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-header-chromium-linux.png
index ced6eaa85d..9e673234a5 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-header-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-header-chromium-linux.png differ