diff --git a/packages/web/src/scss/components/Navigation/README.md b/packages/web/src/scss/components/Navigation/README.md
new file mode 100644
index 0000000000..b754c9d60f
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/README.md
@@ -0,0 +1,89 @@
+# Navigation
+
+The `Navigation` component is a container for the navigation links of the application.
+
+It consists of these parts:
+
+- [Navigation](#navigation)
+- [NavigationLink](#navigationlink)
+
+## Navigation
+
+The `Navigation` is a `nav` wrapper for lists of links or other navigation components.
+
+```html
+
+```
+
+It centers its children vertically and if the children are not NavigationLink components,
+it will insert a gap between them.
+
+ℹ️ If you plan to provide a list of links, wrap them in a `ul` and `li` elements. If not, you can use the
+`nav` element directly.
+
+ℹ️ Don't forget to add the `aria-label` attribute to the `Navigation` component for correct accessible state.
+
+## NavigationLink
+
+The `NavigationLink` is component that is styled to be used as a navigation link.
+
+```html
+Link
+```
+
+It can obtain `selected` or `disabled` states by adding the respective classes.
+
+```html
+Selected Link
+Disabled Link
+```
+
+ℹ️ Don't forget to add the `aria-current="page"` attribute for correct accessible state if selected.
+
+ℹ️ Please note that in the `disabled` state the `NavigationLink` should not be an `a` tag.
+
+If the `NavigationLink` is inside a [`UNSTABLE_Header`][web-unstable-header] component, it will
+inherit the height of the `Header`.
+
+### Full Example
+
+With NavigationLink components:
+
+```html
+
+```
+
+With Buttons:
+
+```html
+
+```
+
+[web-unstable-header]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/UNSTABLE_Header/README.md
diff --git a/packages/web/src/scss/components/Navigation/_Navigation.scss b/packages/web/src/scss/components/Navigation/_Navigation.scss
new file mode 100644
index 0000000000..fafc1bab8f
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_Navigation.scss
@@ -0,0 +1,23 @@
+@use '@tokens' as tokens;
+@use '../../tools/reset';
+@use 'theme';
+
+.Navigation,
+.Navigation > ul,
+.Navigation > ul > li {
+ display: flex;
+}
+
+.Navigation:has(.NavigationLink) {
+ height: var(--#{tokens.$css-variable-prefix}navigation-height, theme.$height);
+}
+
+.Navigation:not(:has(.NavigationLink)),
+.Navigation:not(:has(.NavigationLink)) > ul {
+ gap: theme.$spacing;
+ align-content: center;
+}
+
+.Navigation > ul {
+ @include reset.list();
+}
diff --git a/packages/web/src/scss/components/Navigation/_NavigationLink.scss b/packages/web/src/scss/components/Navigation/_NavigationLink.scss
new file mode 100644
index 0000000000..cc2107d128
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_NavigationLink.scss
@@ -0,0 +1,55 @@
+// 1. We need to set the top border too, otherwise the content won't be aligned properly.
+
+@use '@tokens' as tokens;
+@use '../../tools/typography';
+@use 'theme';
+
+.NavigationLink {
+ @include typography.generate(theme.$link-typography);
+
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-inline: theme.$link-spacing;
+ color: theme.$link-color-state-default;
+ border-top: theme.$link-border-bottom-width theme.$link-border-bottom-style transparent; // 1.
+ border-bottom: theme.$link-border-bottom-width theme.$link-border-bottom-style
+ theme.$link-border-bottom-color-style-state-default;
+ background-color: theme.$link-background-color-state-default;
+
+ @media (hover: hover) {
+ &:hover {
+ text-decoration: none;
+ color: theme.$link-color-state-hover;
+ background-color: theme.$link-background-color-state-hover;
+ }
+ }
+
+ &:active {
+ text-decoration: none;
+ color: theme.$link-color-state-active;
+ background-color: theme.$link-background-color-state-active;
+ }
+}
+
+.NavigationLink--selected {
+ color: theme.$link-color-state-selected;
+ border-bottom-color: theme.$link-border-bottom-color-style-selected-state-default;
+ background-color: theme.$link-background-color-state-selected;
+
+ @media (hover: hover) {
+ &:hover {
+ border-bottom-color: theme.$link-border-bottom-color-style-selected-state-hover;
+ }
+ }
+
+ &:active {
+ border-bottom-color: theme.$link-border-bottom-color-style-selected-state-active;
+ }
+}
+
+.NavigationLink--disabled {
+ color: theme.$link-color-state-disabled;
+ pointer-events: none;
+}
diff --git a/packages/web/src/scss/components/Navigation/_theme.scss b/packages/web/src/scss/components/Navigation/_theme.scss
new file mode 100644
index 0000000000..172d2cac70
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_theme.scss
@@ -0,0 +1,22 @@
+@use '@tokens' as tokens;
+
+$spacing: tokens.$space-700;
+$height: 50px;
+
+$link-typography: tokens.$body-small-semibold;
+$link-spacing: tokens.$space-600;
+$link-color-state-default: tokens.$component-header-item-state-default;
+$link-color-state-hover: tokens.$component-header-item-state-hover;
+$link-color-state-active: tokens.$component-header-item-state-active;
+$link-color-state-selected: tokens.$component-header-item-state-selected;
+$link-color-state-disabled: tokens.$disabled-content;
+$link-border-bottom-width: tokens.$border-width-200;
+$link-border-bottom-style: solid;
+$link-border-bottom-color-style-state-default: transparent;
+$link-border-bottom-color-style-selected-state-default: tokens.$component-header-stripe-state-selected;
+$link-border-bottom-color-style-selected-state-hover: tokens.$component-header-stripe-state-unselected;
+$link-border-bottom-color-style-selected-state-active: tokens.$component-header-stripe-state-unselected;
+$link-background-color-state-default: tokens.$component-header-item-background-state-default;
+$link-background-color-state-hover: tokens.$component-header-item-background-state-hover;
+$link-background-color-state-active: tokens.$component-header-item-background-state-active;
+$link-background-color-state-selected: tokens.$component-header-item-background-state-selected;
diff --git a/packages/web/src/scss/components/Navigation/index.html b/packages/web/src/scss/components/Navigation/index.html
new file mode 100644
index 0000000000..33fde3ec61
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/index.html
@@ -0,0 +1,84 @@
+{{#> web/layout/default title="Navigation" parentPageName="Components" }}
+
+
+
+
+
+
Navigation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
NavigationLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Navigation with Buttons
+
+
+
+
+
+
+
+
+
+
+
+{{/web/layout/default }}
diff --git a/packages/web/src/scss/components/Navigation/index.scss b/packages/web/src/scss/components/Navigation/index.scss
new file mode 100644
index 0000000000..b7fc4e9b32
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/index.scss
@@ -0,0 +1,2 @@
+@forward 'Navigation';
+@forward 'NavigationLink';
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/README.md b/packages/web/src/scss/components/UNSTABLE_Header/README.md
index c5204cd25e..9ccb9203e5 100644
--- a/packages/web/src/scss/components/UNSTABLE_Header/README.md
+++ b/packages/web/src/scss/components/UNSTABLE_Header/README.md
@@ -117,5 +117,62 @@ If you need the whole Header fluid you can do it by adding the `Container--fluid
```
+## With Navigation
+
+You can use the [`Navigation`][web-navigation] component inside the `UNSTABLE_Header` component.
+
+The `NavigationLink` components will inherit the `UNSTABLE_Header` height and set the navigation
+link height to the same value.
+
+Use the composition mentioned above to create the layout you need.
+
+```html
+
+