diff --git a/.changeset/moody-taxis-chew.md b/.changeset/moody-taxis-chew.md
new file mode 100644
index 000000000..abf42b024
--- /dev/null
+++ b/.changeset/moody-taxis-chew.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": patch
+---
+
+fix(OnyxNavItem): fix styles for selected child items
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-chromium-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-chromium-linux.png
new file mode 100644
index 000000000..e9064942c
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-chromium-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-firefox-linux.png
new file mode 100644
index 000000000..20e1f000b
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-webkit-linux.png
new file mode 100644
index 000000000..7c5e052e2
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxMobileNavButton/Mobile-nav-button-webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-chromium-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-chromium-linux.png
index bf27985d3..3123d7056 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-chromium-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-chromium-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-firefox-linux.png
index b6940dc70..fdc72c6ea 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-webkit-linux.png
index 69c684c61..3b76f38ad 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavAppArea/Nav-app-area-webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--chromium-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--chromium-linux.png
index 16aba0934..674f36f54 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--chromium-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--chromium-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--firefox-linux.png
index 60d4622f6..1c5415888 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--webkit-linux.png
index 35259490b..afdfb2d50 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-2xs--webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-lg--webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-lg--webkit-linux.png
index 831c1f315..3dfeb1465 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-lg--webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-lg--webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-md--webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-md--webkit-linux.png
index 7fff6e1fe..7645ab386 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-md--webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-md--webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-sm--webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-sm--webkit-linux.png
index 2c39dc7aa..beda714fa 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-sm--webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-sm--webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xl--webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xl--webkit-linux.png
index c87e7287c..e8c8e80ed 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xl--webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xl--webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--chromium-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--chromium-linux.png
index 97a03fa16..dd82a65c4 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--chromium-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--chromium-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--firefox-linux.png
index 61692b742..2b558a592 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--firefox-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--webkit-linux.png
index e5acce10b..05fb40240 100644
Binary files a/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--webkit-linux.png and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavBar/Navigation-bar-xs--webkit-linux.png differ
diff --git a/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.ct.tsx b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.ct.tsx
new file mode 100644
index 000000000..62afc114f
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.ct.tsx
@@ -0,0 +1,23 @@
+import { test } from "../../playwright/a11y";
+import { executeMatrixScreenshotTest, mockPlaywrightIcon } from "../../playwright/screenshots";
+import OnyxMobileNavButton from "./OnyxMobileNavButton.vue";
+
+test.describe("Screenshot tests", () => {
+  executeMatrixScreenshotTest({
+    name: "Mobile nav button",
+    columns: ["default", "open"],
+    rows: ["default", "hover", "active", "focus-visible"],
+    component: (column) => (
+      <OnyxMobileNavButton label="Label" icon={mockPlaywrightIcon} open={column === "open"} />
+    ),
+    beforeScreenshot: async (component, page, column, row) => {
+      if (row === "hover") await component.hover();
+      if (row === "focus-visible") await page.keyboard.press("Tab");
+      if (row === "active") {
+        const box = (await component.boundingBox())!;
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+      }
+    },
+  });
+});
diff --git a/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.stories.ts b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.stories.ts
new file mode 100644
index 000000000..19ff97943
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.stories.ts
@@ -0,0 +1,37 @@
+import menu from "@sit-onyx/icons/menu.svg?raw";
+import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { defineIconSelectArgType } from "../../utils/storybook";
+import OnyxMobileNavButton from "./OnyxMobileNavButton.vue";
+
+/**
+ * Nav button that is mainly used inside the nav bar on mobile, e.g. for the burger and context menu buttons.
+ */
+const meta: Meta<typeof OnyxMobileNavButton> = {
+  title: "support/MobileNavButton",
+  ...defineStorybookActionsAndVModels({
+    component: OnyxMobileNavButton,
+    events: ["update:open"],
+    argTypes: {
+      icon: defineIconSelectArgType(),
+    },
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxMobileNavButton>;
+
+export const Default = {
+  args: {
+    label: "Open burger menu",
+    icon: menu,
+  },
+} satisfies Story;
+
+export const Open = {
+  args: {
+    label: "Close burger menu",
+    icon: menu,
+    open: true,
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue
new file mode 100644
index 000000000..94d7ad635
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import x from "@sit-onyx/icons/x.svg?raw";
+import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
+import type { OnyxMobileNavButtonProps } from "./types";
+
+const props = withDefaults(defineProps<OnyxMobileNavButtonProps>(), {
+  open: false,
+});
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the open state changes on click.
+   */
+  "update:open": [isOpen: boolean];
+}>();
+</script>
+
+<template>
+  <button
+    class="onyx-mobile-nav-button"
+    :class="{ 'onyx-mobile-nav-button--active': props.open }"
+    :aria-label="props.label"
+    @click="emit('update:open', !props.open)"
+  >
+    <OnyxIcon :icon="props.open ? x : props.icon" />
+  </button>
+</template>
+
+<style lang="scss">
+@use "../../styles/mixins/layers.scss";
+
+.onyx-mobile-nav-button {
+  @include layers.component() {
+    display: flex;
+    background-color: var(--onyx-color-base-background-blank);
+    color: var(--onyx-color-text-icons-neutral-medium);
+    padding: var(--onyx-spacing-md);
+    cursor: pointer;
+
+    :where(&) {
+      border: none;
+    }
+
+    &:hover:not(&--active) {
+      background-color: var(--onyx-color-base-background-tinted);
+    }
+
+    &:focus-visible {
+      background-color: var(--onyx-color-base-secondary-100);
+      outline: none;
+    }
+
+    &:active,
+    &--active {
+      background-color: var(--onyx-color-base-secondary-100);
+      color: var(--onyx-color-text-icons-secondary-intense);
+    }
+  }
+}
+</style>
diff --git a/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts b/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts
new file mode 100644
index 000000000..3835fbb41
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts
@@ -0,0 +1,15 @@
+export type OnyxMobileNavButtonProps = {
+  /**
+   * Aria label that describes the action when clicking the button.
+   */
+  label: string;
+  /**
+   * Icon to show when closed.
+   */
+  icon: string;
+  /**
+   * Whether the button is considered open / is connected to an open menu/flyout.
+   * If `true`, an "x" icon will be displayed.
+   */
+  open?: boolean;
+};
diff --git a/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue b/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue
index 39d81e013..5bb85e89c 100644
--- a/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue
+++ b/packages/sit-onyx/src/components/OnyxNavAppArea/OnyxNavAppArea.vue
@@ -59,7 +59,6 @@ const buttonLabel = computed(() => props.label ?? t.value("navigation.goToHome")
     align-items: center;
     gap: var(--onyx-spacing-md);
     padding: var(--onyx-spacing-md);
-    border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
     font-weight: 600;
     white-space: pre-line;
     max-height: 100%;
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
index 5b9efab1e..74053fc61 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx
@@ -32,6 +32,8 @@ test.describe("Screenshot tests", () => {
           <OnyxNavItem label="Item" active />
           <OnyxNavItem label="Item" />
 
+          <template v-slot:mobileActivePage>Item</template>
+
           {row.includes("context") && (
             <template v-slot:contextArea>
               <OnyxUserMenu username="John Doe" options={[]} />
@@ -92,6 +94,8 @@ test("should be aligned with the grid in a full app layout", async ({ page, moun
         <OnyxNavItem label="Item" active />
         <OnyxNavItem label="Item" />
 
+        <template v-slot:mobileActivePage>Item</template>
+
         <template v-slot:contextArea>
           <OnyxUserMenu username="John Doe" options={[]} />
         </template>
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts
index c14da4aba..272ce0db8 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts
@@ -3,6 +3,7 @@ import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
 import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Decorator, Meta, StoryObj } from "@storybook/vue3";
 import { h } from "vue";
+import { ONYX_BREAKPOINTS } from "../../types";
 import OnyxBadge from "../OnyxBadge/OnyxBadge.vue";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxNavItem from "../OnyxNavItem/OnyxNavItem.vue";
@@ -22,6 +23,19 @@ const meta: Meta<typeof OnyxNavBar> = {
       default: { control: { disable: true } },
       contextArea: { control: { disable: true } },
       appArea: { control: { type: "text" } },
+      mobileActivePage: { control: { type: "text" } },
+      mobileBreakpoint: {
+        options: Object.keys(ONYX_BREAKPOINTS),
+        control: {
+          labels: Object.entries(ONYX_BREAKPOINTS).reduce<Record<string, string>>(
+            (labels, [name, width]) => {
+              labels[name] = `${name} (${width}px)`;
+              return labels;
+            },
+            {},
+          ),
+        },
+      },
     },
     decorators: [
       (story) => ({
@@ -40,7 +54,7 @@ export const Default = {
     logoUrl: "/onyx-logo.svg",
     appName: "App name",
     default: () => [
-      h(OnyxNavItem, { label: "Item", href: "/", active: true }),
+      h(OnyxNavItem, { label: "Item", href: "/" }),
       h(
         OnyxNavItem,
         {
@@ -48,7 +62,7 @@ export const Default = {
           href: "/test",
           options: [
             { label: "Nested item 1", href: "#" },
-            { label: "Nested item 2", href: "#" },
+            { label: "Nested item 2", href: "#", active: true },
             { label: "Nested item 3", href: "#" },
           ],
         },
@@ -56,6 +70,7 @@ export const Default = {
       ),
       h(OnyxNavItem, { label: "Item", href: "https://onyx.schwarz" }),
     ],
+    mobileActivePage: "Nested item 2",
   },
 } satisfies Story;
 
@@ -78,7 +93,9 @@ export const WithContextArea = {
     contextArea: () => [
       h(OnyxTag, { label: "QA stage", color: "warning", icon: browserTerminal }),
       h(OnyxNavSeparator),
-      h(OnyxUserMenu, OnyxUserMenuDefault.args),
+      h(OnyxUserMenu, OnyxUserMenuDefault.args, {
+        footer: OnyxUserMenuDefault.args.footer,
+      }),
     ],
   },
 } satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
index 5af879f27..aa199f1c5 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
@@ -1,11 +1,19 @@
 <script lang="ts" setup>
 import chevronLeftSmall from "@sit-onyx/icons/chevron-left-small.svg?raw";
-import { OnyxNavAppArea } from "../..";
+import menu from "@sit-onyx/icons/menu.svg?raw";
+import moreVertical from "@sit-onyx/icons/more-vertical.svg?raw";
+import { computed, ref } from "vue";
+import { useResizeObserver } from "../../composables/useResizeObserver";
 import { injectI18n } from "../../i18n";
+import { ONYX_BREAKPOINTS } from "../../types";
 import OnyxIconButton from "../OnyxIconButton/OnyxIconButton.vue";
+import OnyxMobileNavButton from "../OnyxMobileNavButton/OnyxMobileNavButton.vue";
+import OnyxNavAppArea from "../OnyxNavAppArea/OnyxNavAppArea.vue";
 import type { OnyxNavBarProps } from "./types";
 
-const props = defineProps<OnyxNavBarProps>();
+const props = withDefaults(defineProps<OnyxNavBarProps>(), {
+  mobileBreakpoint: "xs",
+});
 
 const emit = defineEmits<{
   /**
@@ -32,86 +40,164 @@ const slots = defineSlots<{
    * Optional context area on the right to display additional (global) components, like user login, global settings etc.
    */
   contextArea?: () => unknown;
+  /**
+   * Label for displaying the currently active page in mobile mode.
+   * If a child of a nav item is active, it should displayed the child label instead of the parent.
+   */
+  mobileActivePage?: () => unknown;
 }>();
 
+const navBarRef = ref<HTMLElement>();
+const { width } = useResizeObserver(navBarRef);
+
+const isBurgerOpen = ref(false);
+const isContextOpen = ref(false);
+
+const isMobile = computed(() => {
+  const mobileWidth =
+    typeof props.mobileBreakpoint === "number"
+      ? props.mobileBreakpoint
+      : ONYX_BREAKPOINTS[props.mobileBreakpoint];
+  return width.value <= mobileWidth;
+});
+
 const { t } = injectI18n();
 </script>
 
 <template>
-  <header class="onyx-nav-bar">
-    <div class="onyx-nav-bar__content">
-      <OnyxNavAppArea
-        v-if="props.appName || props.logoUrl || slots.appArea"
-        :app-name="props.appName"
-        :logo-url="props.logoUrl"
-        :label="props.appAreaLabel"
-        @click="emit('appAreaClick')"
-      >
-        <slot name="appArea"></slot>
-      </OnyxNavAppArea>
-
-      <OnyxIconButton
-        v-if="props.withBackButton"
-        :label="t('navigation.goBack')"
-        :icon="chevronLeftSmall"
-        color="neutral"
-        @click="emit('backButtonClick')"
-      />
-
-      <nav v-if="slots.default">
-        <ul class="onyx-nav-bar__nav" role="menubar">
-          <slot></slot>
-        </ul>
-      </nav>
-
-      <div v-if="slots.contextArea" class="onyx-nav-bar__context">
-        <slot name="contextArea"></slot>
+  <div>
+    <header ref="navBarRef" class="onyx-nav-bar" :class="{ 'onyx-nav-bar--mobile': isMobile }">
+      <div class="onyx-nav-bar__content">
+        <span
+          v-if="isMobile && !isBurgerOpen && slots.mobileActivePage"
+          class="onyx-nav-bar__mobile-page"
+        >
+          <slot name="mobileActivePage"></slot>
+        </span>
+
+        <OnyxNavAppArea
+          v-else-if="props.appName || props.logoUrl || slots.appArea"
+          class="onyx-nav-bar__app"
+          :app-name="props.appName"
+          :logo-url="props.logoUrl"
+          :label="props.appAreaLabel"
+          @click="
+            emit('appAreaClick');
+            isBurgerOpen = false;
+          "
+        >
+          <slot name="appArea"></slot>
+        </OnyxNavAppArea>
+
+        <OnyxIconButton
+          v-if="props.withBackButton"
+          class="onyx-nav-bar__back"
+          :label="t('navigation.goBack')"
+          :icon="chevronLeftSmall"
+          color="neutral"
+          @click="emit('backButtonClick')"
+        />
+
+        <template v-if="slots.default">
+          <OnyxMobileNavButton
+            v-if="isMobile"
+            v-model:open="isBurgerOpen"
+            class="onyx-nav-bar__burger"
+            :icon="menu"
+            :label="t('navigation.toggleBurgerMenu')"
+            @update:open="isContextOpen = false"
+          />
+
+          <nav v-else class="onyx-nav-bar__nav">
+            <ul role="menubar">
+              <slot></slot>
+            </ul>
+          </nav>
+        </template>
+
+        <template v-if="slots.contextArea">
+          <OnyxMobileNavButton
+            v-if="isMobile"
+            v-model:open="isContextOpen"
+            class="onyx-nav-bar__mobile-context"
+            :icon="moreVertical"
+            :label="t('navigation.toggleContextMenu')"
+            @update:open="isBurgerOpen = false"
+          />
+
+          <div v-else class="onyx-nav-bar__context">
+            <slot name="contextArea"></slot>
+          </div>
+        </template>
       </div>
-    </div>
-  </header>
+    </header>
+
+    <!-- TODO: implement mobile burger/context flyouts -->
+  </div>
 </template>
 
 <style lang="scss">
 @use "../../styles/mixins/layers";
 @use "../../styles/breakpoints.scss";
 
+$gap: var(--onyx-spacing-md);
+
 .onyx-nav-bar {
   @include layers.component() {
-    --padding-inline: var(--onyx-spacing-3xl);
-
-    border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
     background-color: var(--onyx-color-base-background-blank);
     font-family: var(--onyx-font-family);
     color: var(--onyx-color-text-icons-neutral-intense);
     height: 3.5rem;
-    container-type: size;
     z-index: var(--onyx-z-index-navigation);
+    position: relative;
+    container-type: size;
+
+    // implement bottom border with ::after so it does not add to the height
+    &::after {
+      content: " ";
+      background-color: var(--onyx-color-base-neutral-300);
+      height: var(--onyx-1px-in-rem);
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    }
 
     &__content {
-      display: flex;
+      display: grid;
+      grid-template-columns: max-content 1fr auto;
+      grid-template-areas: "app nav context";
       align-items: center;
-      gap: var(--onyx-spacing-md);
+      gap: $gap;
       height: 100%;
-      padding-inline: var(--padding-inline);
+      padding-inline: var(--onyx-spacing-3xl);
+
+      &:has(.onyx-nav-bar__back) {
+        grid-template-columns: max-content max-content 1fr auto;
+        grid-template-areas: "app back nav context";
+      }
 
       // sync with grid
       max-width: var(--onyx-grid-max-width);
       margin-inline: var(--onyx-grid-margin-inline);
 
       @include breakpoints.container(max, sm) {
-        --padding-inline: var(--onyx-spacing-xl);
+        padding-inline: var(--onyx-spacing-xl);
       }
+    }
 
-      @include breakpoints.container(max, xs) {
-        --padding-inline: var(--onyx-spacing-md);
-      }
+    &__back {
+      grid-area: back;
     }
 
     &__nav {
-      display: flex;
-      align-items: center;
-      gap: var(--onyx-spacing-4xs);
-      padding: 0;
+      grid-area: nav;
+
+      > ul {
+        display: flex;
+        align-items: center;
+        gap: var(--onyx-spacing-4xs);
+        padding: 0;
+      }
     }
 
     &__context {
@@ -119,7 +205,47 @@ const { t } = injectI18n();
       align-items: center;
       justify-content: flex-end;
       gap: var(--onyx-spacing-4xs);
-      flex-grow: 1;
+      grid-area: context;
+    }
+
+    &__app {
+      border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
+      grid-area: app;
+    }
+
+    &--mobile {
+      .onyx-nav-bar__content {
+        grid-template-columns: max-content max-content max-content auto;
+        grid-template-areas: "burger back nav mobile-context";
+        gap: 0;
+        padding-inline: 0;
+
+        .onyx-nav-bar__back {
+          margin-left: $gap;
+        }
+      }
+
+      .onyx-nav-bar__app {
+        border-right: none;
+        grid-area: nav;
+      }
+    }
+
+    &__burger {
+      border-right: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
+      grid-area: burger;
+    }
+
+    &__mobile-context {
+      grid-area: mobile-context;
+      margin-left: auto;
+    }
+
+    &__mobile-page {
+      grid-area: nav;
+      color: var(--onyx-color-text-icons-secondary-intense);
+      padding-inline: $gap;
+      font-weight: 600;
     }
   }
 }
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/types.ts b/packages/sit-onyx/src/components/OnyxNavBar/types.ts
index f70014187..5a3493bd7 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/types.ts
+++ b/packages/sit-onyx/src/components/OnyxNavBar/types.ts
@@ -1,3 +1,4 @@
+import type { OnyxBreakpoint } from "../../types";
 import type { OnyxNavAppAreaProps } from "../OnyxNavAppArea/types";
 
 export type OnyxNavBarProps = OnyxNavAppAreaProps & {
@@ -10,4 +11,12 @@ export type OnyxNavBarProps = OnyxNavAppAreaProps & {
    * @default Translated "Go to home" depending on the current locale.
    */
   appAreaLabel?: string;
+  /**
+   * Breakpoint name when the nav bar should switch into mobile mode.
+   * Will switch if smaller or equal to the given breakpoint.
+   * Can be either a pre-defined onyx breakpoint or custom width in pixels.
+   *
+   * @see [onyx docs](https://onyx.schwarz/development/breakpoints.html) for more information.
+   */
+  mobileBreakpoint?: OnyxBreakpoint | number;
 };
diff --git a/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.vue b/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.vue
index 2f38e8a24..9580a16d2 100644
--- a/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.vue
+++ b/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import arrowSmallUpRight from "@sit-onyx/icons/arrow-small-up-right.svg?raw";
-import { isExternalLink } from "../../utils";
 import { injectI18n } from "../../i18n";
-import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
-import type { OnyxNavItemProps } from "./types";
+import { isExternalLink } from "../../utils";
 import OnyxFlyoutMenu from "../OnyxFlyoutMenu/OnyxFlyoutMenu.vue";
+import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import OnyxListItem from "../OnyxListItem/OnyxListItem.vue";
+import type { OnyxNavItemProps } from "./types";
 
 const props = withDefaults(defineProps<OnyxNavItemProps>(), {
   active: false,
@@ -65,7 +65,7 @@ const shouldShowExternalIcon = (args: OnyxNavItemProps) => {
       <OnyxListItem
         v-for="option in props.options"
         :key="option.label"
-        :active="option.active"
+        :aria-selected="option.active"
         @click="emit('click', option.href)"
       >
         {{ option.label }}
@@ -135,6 +135,7 @@ const shouldShowExternalIcon = (args: OnyxNavItemProps) => {
         bottom: calc(-1 * var(--onyx-spacing-2xs));
         border-radius: var(--onyx-radius-full) var(--onyx-radius-full) 0 0;
         background: var(--onyx-color-base-secondary-500);
+        z-index: 1; // needed to display underline above the nav bar bottom border
       }
     }
 
diff --git a/packages/sit-onyx/src/components/OnyxTimer/OnyxTimer.vue b/packages/sit-onyx/src/components/OnyxTimer/OnyxTimer.vue
index 55252a62c..f25cc086e 100644
--- a/packages/sit-onyx/src/components/OnyxTimer/OnyxTimer.vue
+++ b/packages/sit-onyx/src/components/OnyxTimer/OnyxTimer.vue
@@ -31,7 +31,7 @@ watchEffect(() => isEnded.value && emit("timerEnded"));
 
 <template>
   <div
-    class="onyx-timer onyx-text"
+    class="onyx-timer onyx-text onyx-truncation-ellipsis"
     role="timer"
     :aria-label="props.hideLabel ? props.label : undefined"
   >
diff --git a/packages/sit-onyx/src/composables/useResizeObserver.spec.ts b/packages/sit-onyx/src/composables/useResizeObserver.spec.ts
new file mode 100644
index 000000000..cd62db172
--- /dev/null
+++ b/packages/sit-onyx/src/composables/useResizeObserver.spec.ts
@@ -0,0 +1,31 @@
+import { describe, expect, test, vi } from "vitest";
+import { ref } from "vue";
+import { useResizeObserver } from "./useResizeObserver";
+
+describe("useResizeObserver", () => {
+  test("should get component size", () => {
+    let callback: ((entries: Partial<ResizeObserverEntry>[]) => void) | undefined;
+
+    const spy = {
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+      unobserve: vi.fn(),
+    } satisfies InstanceType<typeof ResizeObserver>;
+
+    global.ResizeObserver = vi.fn().mockImplementation((_callback) => {
+      callback = _callback;
+      return spy;
+    });
+
+    const component = ref(document.createElement("div"));
+    const { height, width } = useResizeObserver(component);
+
+    expect(ResizeObserver).toHaveBeenCalledOnce();
+    expect(spy.observe).toHaveBeenCalledWith(component.value, { box: "content-box" });
+    expect(callback).toBeDefined();
+
+    callback!([{ contentBoxSize: [{ blockSize: 42, inlineSize: 100 }] }]);
+    expect(height.value).toBe(42);
+    expect(width.value).toBe(100);
+  });
+});
diff --git a/packages/sit-onyx/src/composables/useResizeObserver.ts b/packages/sit-onyx/src/composables/useResizeObserver.ts
new file mode 100644
index 000000000..39f7dcb44
--- /dev/null
+++ b/packages/sit-onyx/src/composables/useResizeObserver.ts
@@ -0,0 +1,46 @@
+import { onBeforeUnmount, ref, watch, type Ref } from "vue";
+
+export type UseResizeObserverOptions = {
+  /**
+   * Sets which box model the observer will observe changes to.
+   *
+   * @default 'content-box'
+   */
+  box?: ResizeObserverBoxOptions;
+};
+
+export const useResizeObserver = (
+  target: Ref<HTMLElement | undefined>,
+  options?: UseResizeObserverOptions,
+) => {
+  const box = options?.box ?? "content-box";
+  const width = ref(0);
+  const height = ref(0);
+
+  const callback: ResizeObserverCallback = (entries) => {
+    const boxSize =
+      box === "content-box"
+        ? entries[0].contentBoxSize
+        : box === "border-box"
+          ? entries[0].borderBoxSize
+          : entries[0].devicePixelContentBoxSize;
+
+    width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+    height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+  };
+
+  const observer = new ResizeObserver(callback);
+
+  watch(
+    target,
+    (newTarget, oldTarget) => {
+      if (oldTarget) observer?.unobserve(oldTarget);
+      if (newTarget) observer?.observe(newTarget, { box });
+    },
+    { immediate: true },
+  );
+
+  onBeforeUnmount(() => observer.disconnect());
+
+  return { width, height };
+};
diff --git a/packages/sit-onyx/src/i18n/locales/de-DE.json b/packages/sit-onyx/src/i18n/locales/de-DE.json
index 86348428d..d33f08f82 100644
--- a/packages/sit-onyx/src/i18n/locales/de-DE.json
+++ b/packages/sit-onyx/src/i18n/locales/de-DE.json
@@ -75,7 +75,11 @@
     "appLogo": "App logo von {appName}",
     "goToHome": "Gehe zur Startseite",
     "goBack": "Zurück",
-    "userMenuLabel": "Benutzeroptionen"
+    "userMenuLabel": "Benutzeroptionen",
+    "toggleBurgerMenu": "Burger-Menü umschalten",
+    "toggleContextMenu": "Kontext-Menü umschalten",
+    "navigationHeadline": "Navigation",
+    "optionsHeadline": "Optionen"
   },
   "showTooltip": {
     "info": "Info-Tooltip anzeigen",
diff --git a/packages/sit-onyx/src/i18n/locales/en-US.json b/packages/sit-onyx/src/i18n/locales/en-US.json
index 4754349d3..0779e9caa 100644
--- a/packages/sit-onyx/src/i18n/locales/en-US.json
+++ b/packages/sit-onyx/src/i18n/locales/en-US.json
@@ -75,7 +75,11 @@
     "appLogo": "App logo of {appName}",
     "goToHome": "Go to home page",
     "goBack": "Go back",
-    "userMenuLabel": "User options"
+    "userMenuLabel": "User options",
+    "toggleBurgerMenu": "Toggle burger menu",
+    "toggleContextMenu": "Toggle context menu",
+    "navigationHeadline": "Navigation",
+    "optionsHeadline": "Options"
   },
   "showTooltip": {
     "info": "Show info tooltip",
diff --git a/packages/sit-onyx/src/index.ts b/packages/sit-onyx/src/index.ts
index db1d2cc5c..788d241a0 100644
--- a/packages/sit-onyx/src/index.ts
+++ b/packages/sit-onyx/src/index.ts
@@ -52,6 +52,9 @@ export * from "./components/OnyxLoadingIndicator/types";
 
 export { default as OnyxMiniSearch } from "./components/OnyxMiniSearch/OnyxMiniSearch.vue";
 
+export { default as OnyxMobileNavButton } from "./components/OnyxMobileNavButton/OnyxMobileNavButton.vue";
+export * from "./components/OnyxMobileNavButton/types";
+
 export { default as OnyxNavAppArea } from "./components/OnyxNavAppArea/OnyxNavAppArea.vue";
 export * from "./components/OnyxNavAppArea/types";