diff --git a/.changeset/hungry-beers-admire.md b/.changeset/hungry-beers-admire.md
new file mode 100644
index 0000000000..f59bc5db0f
--- /dev/null
+++ b/.changeset/hungry-beers-admire.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+Add new OnyxNavButton component
diff --git a/.changeset/six-llamas-provide.md b/.changeset/six-llamas-provide.md
new file mode 100644
index 0000000000..4357e3da74
--- /dev/null
+++ b/.changeset/six-llamas-provide.md
@@ -0,0 +1,5 @@
+---
+"@sit-onyx/headless": minor
+---
+
+Add new createMenuButton composable
diff --git a/packages/headless/src/composables/menuButton/TestMenuButton.ct.tsx b/packages/headless/src/composables/menuButton/TestMenuButton.ct.tsx
new file mode 100644
index 0000000000..b6e664c03c
--- /dev/null
+++ b/packages/headless/src/composables/menuButton/TestMenuButton.ct.tsx
@@ -0,0 +1,14 @@
+import { test } from "@playwright/experimental-ct-vue";
+import { menuButtonTesting } from "./createMenuButton.ct";
+import TestMenuButton from "./TestMenuButton.vue";
+
+test("menuButton", async ({ mount, page }) => {
+  await mount(<TestMenuButton />);
+
+  await menuButtonTesting({
+    page,
+    button: page.getByRole("button"),
+    menu: page.locator("ul"),
+    menuItems: await page.locator("li").all(),
+  });
+});
diff --git a/packages/headless/src/composables/menuButton/TestMenuButton.vue b/packages/headless/src/composables/menuButton/TestMenuButton.vue
new file mode 100644
index 0000000000..cbee4e3a0b
--- /dev/null
+++ b/packages/headless/src/composables/menuButton/TestMenuButton.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { createMenuButton } from "./createMenuButton";
+import { ref } from "vue";
+
+const items = Array.from({ length: 10 }, (_, index) => {
+  const id = index + 1;
+  return { label: `Item ${id}`, value: `/href-${id}` };
+});
+
+const activeItem = ref<string>();
+
+const {
+  elements: { button, menu, menuItem, listItem, flyout },
+  state: { isExpanded },
+} = createMenuButton({
+  onSelect: (value) => {
+    activeItem.value = value;
+  },
+});
+</script>
+
+<template>
+  <button v-bind="button">Toggle nav menu</button>
+  <div v-bind="flyout">
+    <ul v-show="isExpanded" v-bind="menu">
+      <li v-for="item in items" v-bind="listItem" :key="item.value" title="item">
+        <a v-bind="menuItem({ active: activeItem === item.value, value: item.value })">{{
+          item.label
+        }}</a>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/packages/headless/src/composables/menuButton/createMenuButton.ct.ts b/packages/headless/src/composables/menuButton/createMenuButton.ct.ts
new file mode 100644
index 0000000000..ae77e39da0
--- /dev/null
+++ b/packages/headless/src/composables/menuButton/createMenuButton.ct.ts
@@ -0,0 +1,54 @@
+import { expect } from "@playwright/experimental-ct-vue";
+import type { Locator, Page } from "@playwright/test";
+
+export type MenuButtonTestingOptions = {
+  /**
+   * Playwright page.
+   */
+  page: Page;
+  /**
+   * Locator for the button element.
+   */
+  button: Locator;
+  /**
+   * Menu, e.g. a `<ul>` element.
+   */
+  menu: Locator;
+  /**
+   * List items (at least 3).
+   */
+  menuItems: Locator[];
+};
+
+/**
+ * Playwright utility for executing accessibility testing for a navigation menu.
+ * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
+ */
+export const menuButtonTesting = async ({ button, menu }: MenuButtonTestingOptions) => {
+  const menuId = await menu.getAttribute("id");
+  expect(menuId).toBeDefined();
+  await expect(
+    button,
+    "navigation menu should have set the list ID to the aria-controls",
+  ).toHaveAttribute("aria-controls", menuId!);
+
+  await expect(
+    button,
+    'navigation menu should have an "aria-haspopup" attribute set to true',
+  ).toHaveAttribute("aria-haspopup", "true");
+
+  await expect(button).toBeVisible();
+
+  // ensure correct navigation menu aria attributes
+  await expect(
+    button,
+    'flyout menu must have an "aria-expanded" attribute set to false',
+  ).toHaveAttribute("aria-expanded", "false");
+
+  button.hover();
+
+  await expect(
+    button,
+    'flyout menu must have an "aria-expanded" attribute set to true',
+  ).toHaveAttribute("aria-expanded", "true");
+};
diff --git a/packages/headless/src/composables/menuButton/createMenuButton.ts b/packages/headless/src/composables/menuButton/createMenuButton.ts
new file mode 100644
index 0000000000..821f89fecc
--- /dev/null
+++ b/packages/headless/src/composables/menuButton/createMenuButton.ts
@@ -0,0 +1,69 @@
+import { computed, ref } from "vue";
+import { createBuilder } from "../../utils/builder";
+import { createId } from "../../utils/id";
+import { debounce } from "../../utils/timer";
+
+export type CreateMenuButtonOptions = {
+  /**
+   * Called when a menu item is selected (via mouse or keyboard).
+   */
+  onSelect: (value: string) => void;
+};
+
+export const createMenuButton = createBuilder((options: CreateMenuButtonOptions) => {
+  const menuId = createId("menu");
+  const buttonId = createId("menu-button");
+  const isExpanded = ref<boolean>(false);
+
+  /**
+   * Debounced expanded state that will only be toggled after a given timeout.
+   */
+  const updateDebouncedExpanded = debounce(
+    (expanded: boolean) => (isExpanded.value = expanded),
+    200,
+  );
+
+  const hoverEvents = computed(() => {
+    return {
+      onMouseover: () => updateDebouncedExpanded(true),
+      onMouseout: () => updateDebouncedExpanded(false),
+      onFocusin: () => (isExpanded.value = true),
+      onFocusout: () => (isExpanded.value = false),
+    };
+  });
+
+  return {
+    state: { isExpanded },
+    elements: {
+      button: computed(
+        () =>
+          ({
+            "aria-controls": menuId,
+            "aria-expanded": isExpanded.value,
+            "aria-haspopup": true,
+            id: buttonId,
+            ...hoverEvents.value,
+          }) as const,
+      ),
+      listItem: {
+        role: "none",
+      },
+      flyout: {
+        ...hoverEvents.value,
+      },
+      menu: {
+        id: menuId,
+        role: "menu",
+        "aria-labelledby": buttonId,
+      },
+      menuItem: (data: { active?: boolean; value: string }) => ({
+        "aria-current": data.active ? "page" : undefined,
+        role: "menuitem",
+        tabindex: -1,
+        onClick: () => {
+          options.onSelect(data.value);
+        },
+      }),
+    },
+  };
+});
diff --git a/packages/headless/src/index.ts b/packages/headless/src/index.ts
index 798966f930..636dc4a1d1 100644
--- a/packages/headless/src/index.ts
+++ b/packages/headless/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./composables/comboBox/createComboBox";
 export * from "./composables/listbox/createListbox";
 export * from "./composables/tooltip/createTooltip";
+export * from "./composables/menuButton/createMenuButton";
 export { createId } from "./utils/id";
 export { isPrintableCharacter, wasKeyPressed } from "./utils/keyboard";
diff --git a/packages/headless/src/playwright.ts b/packages/headless/src/playwright.ts
index 0a1428ee8e..81e0b7e6d7 100644
--- a/packages/headless/src/playwright.ts
+++ b/packages/headless/src/playwright.ts
@@ -1,2 +1,3 @@
 export * from "./composables/comboBox/createComboBox.ct";
 export * from "./composables/listbox/createListbox.ct";
+export * from "./composables/menuButton/createMenuButton.ct";
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-chromium-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-chromium-linux.png
new file mode 100644
index 0000000000..d6b5374649
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-chromium-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-firefox-linux.png
new file mode 100644
index 0000000000..0f314aca45
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-webkit-linux.png
new file mode 100644
index 0000000000..da410aa1ec
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-webkit-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-chromium-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-chromium-linux.png
new file mode 100644
index 0000000000..42bd27f65c
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-chromium-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-firefox-linux.png
new file mode 100644
index 0000000000..e1f28e9a00
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-webkit-linux.png
new file mode 100644
index 0000000000..9c55027eac
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxNavButton/NavButton-with-nested-children-webkit-linux.png differ
diff --git a/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/OnyxFlyoutMenu.stories.ts b/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/OnyxFlyoutMenu.stories.ts
new file mode 100644
index 0000000000..04b377ad35
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/OnyxFlyoutMenu.stories.ts
@@ -0,0 +1,55 @@
+import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h } from "vue";
+import OnyxListItem from "../../OnyxListItem/OnyxListItem.vue";
+import OnyxButton from "../../OnyxButton/OnyxButton.vue";
+import OnyxFlyoutMenu from "./OnyxFlyoutMenu.vue";
+
+const meta: Meta<typeof OnyxFlyoutMenu> = {
+  title: "future/FlyoutMenu",
+  ...defineStorybookActionsAndVModels({
+    component: OnyxFlyoutMenu,
+    events: [],
+    decorators: [
+      (story) => ({
+        components: { story },
+        template: `
+        <div style="height: 28rem;">
+          <story />
+        </div>`,
+      }),
+    ],
+    argTypes: {
+      default: { control: { disable: true } },
+      options: { control: { disable: true } },
+      header: { control: { disable: true } },
+      footer: { control: { disable: true } },
+    },
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxFlyoutMenu>;
+
+const listAnimals = [
+  { label: "Cat" },
+  { label: "Dog" },
+  { label: "Tiger" },
+  { label: "Reindeer" },
+  { label: "Racoon" },
+  { label: "Dolphin" },
+  { label: "Flounder" },
+  { label: "Eel" },
+  { label: "Falcon" },
+  { label: "Owl" },
+];
+
+/**
+ * This example shows a basic OnyxFlyoutMenu
+ */
+export const Default = {
+  args: {
+    default: () => h(OnyxButton, { label: "Hover me" }),
+    options: () => listAnimals.map(({ label }) => h(OnyxListItem, label)),
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/OnyxFlyoutMenu.vue b/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/OnyxFlyoutMenu.vue
new file mode 100644
index 0000000000..6bb1fc78f7
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/OnyxFlyoutMenu.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts" generic="TValue extends SelectOptionValue = SelectOptionValue">
+import { createMenuButton } from "@sit-onyx/headless";
+import type { SelectOptionValue } from "../../../types";
+import { computed, ref, type VNode } from "vue";
+import { injectI18n } from "../../../i18n";
+
+const slots = defineSlots<{
+  /**
+   * The trigger for the flyout menu
+   */
+  default(): VNode[];
+  /**
+   * OnyxListItems to show
+   */
+  options?(): VNode[];
+  /**
+   * Optional header content to display above the options.
+   */
+  header?(): unknown;
+  /**
+   * Optional footer content to display below the options (will replace `message` property).
+   */
+  footer?(): unknown;
+}>();
+
+const activeItem = ref<string>();
+
+const {
+  elements: { button, menu, menuItem, listItem, flyout },
+  state: { isExpanded },
+} = createMenuButton({
+  onSelect: (value) => {
+    activeItem.value = value;
+  },
+});
+
+const getSlotComponents = (vnodes: VNode[]): VNode[] => {
+  // if the slot only contains a v-for, we need to use the children here which are the "actual" slot content
+  const isVFor = vnodes.length === 1 && vnodes[0].type.toString() === "Symbol(v-fgt)";
+
+  const allNodes =
+    isVFor && Array.isArray(vnodes[0].children)
+      ? (vnodes[0].children as Extract<(typeof vnodes)[number]["children"], []>)
+      : vnodes;
+
+  return allNodes;
+};
+
+const options = computed(() => {
+  return getSlotComponents(slots.options?.() ?? []);
+});
+
+const { t } = injectI18n();
+</script>
+
+<template>
+  <div class="onyx-future-flyout-menu">
+    <component :is="slots.default?.()?.[0]" v-bind="button" />
+    <div
+      v-if="slots.options || slots.header || slots.footer"
+      v-show="isExpanded"
+      v-bind="flyout"
+      :aria-label="t('navigation.navigationHeadline')"
+      :class="{
+        'onyx-future-flyout-menu__list--with-header': !!slots.header,
+        'onyx-future-flyout-menu__list--with-footer': !!slots.footer,
+        'onyx-future-flyout-menu__list': true,
+      }"
+    >
+      <slot name="header"></slot>
+      <ul
+        v-if="slots.options"
+        v-bind="menu"
+        class="onyx-future-flyout-menu__wrapper onyx-flyout-menu__group"
+      >
+        <li
+          v-for="(item, index) in options"
+          v-bind="listItem"
+          :key="index"
+          class="onyx-future-flyout-menu__option"
+        >
+          <component
+            :is="item"
+            v-bind="
+              item.props?.href
+                ? menuItem({ active: activeItem === item.props.href, value: item.props.href })
+                : undefined
+            "
+          />
+        </li>
+      </ul>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use "../../../styles/mixins/layers";
+
+// TODO: replace 'onyx-future-flyout-menu' class name with 'onyx-flyout-menu' after merging this component
+// with the official OnyxFlyoutMenu
+.onyx-future-flyout-menu {
+  @include layers.component() {
+    // TODO: remove comment after replacing this component with the official OnyxFlyoutMenu
+    // display: inline-block;
+    width: min-content;
+
+    &__list {
+      position: absolute;
+      margin-top: var(--onyx-spacing-sm);
+      border-radius: var(--onyx-radius-md);
+      background-color: var(--onyx-color-base-background-blank);
+      padding: var(--onyx-spacing-2xs) 0;
+      box-shadow: var(--onyx-shadow-medium-bottom);
+      box-sizing: border-box;
+      width: max-content;
+      min-width: var(--onyx-spacing-4xl);
+      max-width: 20rem;
+      font-family: var(--onyx-font-family);
+      z-index: var(--onyx-z-index-flyout);
+
+      &--with-header {
+        padding-top: 0;
+      }
+
+      &--with-footer {
+        padding-bottom: 0;
+      }
+    }
+
+    &__wrapper {
+      padding: 0;
+    }
+
+    &__option {
+      list-style: none;
+    }
+  }
+}
+</style>
diff --git a/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/readme.md b/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/readme.md
new file mode 100644
index 0000000000..fa892cfa3b
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxFlyoutMenu/future/readme.md
@@ -0,0 +1,3 @@
+# OnyxFlyoutMenu
+
+This is the new (future) version of OnyxFlyoutMenu component. The strucuture of the component is optimized and it will replace the current OnyxFlyoutMenu in the future.
diff --git a/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue b/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue
index 3412567f8e..614ce60fd5 100644
--- a/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue
+++ b/packages/sit-onyx/src/components/OnyxListItem/OnyxListItem.vue
@@ -92,4 +92,3 @@ const props = defineProps<Pick<SelectOption, "color"> & { active?: boolean }>();
   }
 }
 </style>
-../OnyxSelect/types
diff --git a/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.ct.tsx b/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.ct.tsx
new file mode 100644
index 0000000000..d6cf03059e
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.ct.tsx
@@ -0,0 +1,81 @@
+import type { Locator } from "@playwright/test";
+import { expect, test } from "../../playwright/a11y";
+import { executeMatrixScreenshotTest } from "../../playwright/screenshots";
+import OnyxListItem from "../OnyxListItem/OnyxListItem.vue";
+import OnyxNavButton from "./OnyxNavButton.vue";
+
+test.describe("Screenshot tests", () => {
+  executeMatrixScreenshotTest({
+    name: "NavButton",
+    columns: ["default", "active"],
+    rows: ["default", "hover", "focus-visible", "external-link"],
+    /**
+     * This component represents only the child (menuitem) of the overall menu.
+     * "aria-required-parent" test is disabled because it requires a child with role="menuitem"
+     * to have a parent with role="menu".
+     *
+     * TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
+     */
+    disabledAccessibilityRules: ["aria-required-parent", "color-contrast"],
+    component: (column, row) => (
+      <OnyxNavButton
+        label="Nav Button"
+        href={row === "external-link" ? "https://onyx.schwarz/" : "#"}
+        active={column === "active"}
+      />
+    ),
+    beforeScreenshot: async (component, page, _column, row) => {
+      await expect(component).toContainText("Nav Button");
+      if (row === "hover") await component.hover();
+      if (row === "focus-visible") await page.keyboard.press("Tab");
+    },
+  });
+});
+
+test.describe("Screenshot tests with nested children", () => {
+  const isFlyoutVisible = async (flyout: Locator) => {
+    await expect(flyout).toBeVisible();
+  };
+
+  executeMatrixScreenshotTest({
+    name: "NavButton with nested children",
+    columns: ["inactive", "active"],
+    rows: ["hover", "focus-visible"],
+    /**
+     * This component represents only the child (menuitem) of the overall menu.
+     * "aria-required-parent" test is disabled because it requires a child with role="menuitem"
+     * to have a parent with role="menu".
+     *
+     * "aria-required-children" test is disabled because it's a slot based component
+     *
+     * TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
+     */
+    disabledAccessibilityRules: [
+      "aria-required-parent",
+      "color-contrast",
+      "aria-required-children",
+    ],
+    component: (column) => (
+      <OnyxNavButton label="Item" href="#" active={column === "active"}>
+        <template v-slot:children>
+          <OnyxListItem>Nested Item 1</OnyxListItem>
+          <OnyxListItem>Nested Item 2</OnyxListItem>
+          <OnyxListItem>Nested Item 3</OnyxListItem>
+        </template>
+      </OnyxNavButton>
+    ),
+    beforeScreenshot: async (component, page, _column, row) => {
+      const flyout = page.getByLabel("Navigation");
+      await component.hover();
+      if (row === "focus-visible") await page.keyboard.press("Tab");
+      // since the flyout is positioned absolute, we need to set the component size accordingly
+      // so the screenshot contains the whole component
+      await component.evaluate((element) => {
+        element.style.height = "200px";
+        element.style.width = "100px";
+      });
+
+      await isFlyoutVisible(flyout);
+    },
+  });
+});
diff --git a/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.stories.ts b/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.stories.ts
new file mode 100644
index 0000000000..53985987b3
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.stories.ts
@@ -0,0 +1,90 @@
+import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h } from "vue";
+import OnyxNavButton from "./OnyxNavButton.vue";
+import OnyxListItem from "../OnyxListItem/OnyxListItem.vue";
+import OnyxBadge from "../OnyxBadge/OnyxBadge.vue";
+
+/**
+ * The nav button is used internally to build the main navigation bar component and is not intended to be used individually.
+ */
+const meta: Meta<typeof OnyxNavButton> = {
+  title: "support/NavButton",
+  ...defineStorybookActionsAndVModels({
+    component: OnyxNavButton,
+    events: ["click"],
+    argTypes: {
+      default: {
+        control: { type: "text" },
+      },
+    },
+  }),
+};
+
+const nestedChildren = [
+  { label: "Nested Item 1", href: "#", active: true },
+  { label: "Nested Item 2", href: "https://onyx.schwarz" },
+  { label: "Nested Item 3", href: "#3" },
+  { label: "Nested Item 4", href: "#4" },
+  { label: "Nested Item 5", href: "#5" },
+];
+
+export default meta;
+type Story = StoryObj<typeof OnyxNavButton>;
+
+/**
+ * This example shows a default nav button.
+ */
+export const Default = {
+  args: {
+    label: "Nav Button",
+    default: "Item",
+  },
+} satisfies Story;
+
+/**
+ * This example shows an active nav button.
+ */
+export const Active = {
+  args: {
+    ...Default.args,
+    active: true,
+  },
+} satisfies Story;
+
+/**
+ * This example shows the nav button with nested children.
+ */
+export const WithChildren: Story = {
+  args: {
+    ...Default.args,
+    active: true,
+    children: () => nestedChildren.map(({ label }) => h(OnyxListItem, label)),
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `<div style="height: 16rem"> <story /> </div>`,
+    }),
+  ],
+};
+
+/**
+ * This example shows the nav button with additional content (a dot badge in this case).
+ */
+export const WithCustomContent = {
+  args: {
+    ...Default.args,
+    default: ["Custom label", h(OnyxBadge, { dot: true, color: "warning" })],
+  },
+} satisfies Story;
+
+/**
+ * This example shows the nav item with external link.
+ */
+export const WithExternalLink = {
+  args: {
+    label: "onyx",
+    href: "https://onyx.schwarz/",
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.vue b/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.vue
new file mode 100644
index 0000000000..0c05b98f5f
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxNavButton/OnyxNavButton.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { isExternalLink } from "../../utils";
+import arrowSmallUpRight from "@sit-onyx/icons/arrow-small-up-right.svg?raw";
+import OnyxFlyoutMenu from "../OnyxFlyoutMenu/future/OnyxFlyoutMenu.vue";
+import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
+import { type OnyxNavButtonProps } from "./types";
+import { type VNode } from "vue";
+
+const props = withDefaults(defineProps<OnyxNavButtonProps>(), {
+  active: false,
+  withExternalIcon: "auto",
+});
+
+const slots = defineSlots<{
+  /**
+   * An optional slot to override the label content (e.g. an `OnyxBadge`).
+   */
+  default?(): unknown;
+  /**
+   * An optional slot to render nested children.
+   */
+  children?(): VNode[];
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the nav button is clicked (via click or keyboard).
+   */
+  click: [href: string];
+}>();
+
+const shouldShowExternalIcon = (args: OnyxNavButtonProps) => {
+  const withExternalIcon = args.withExternalIcon ?? "auto";
+
+  if (withExternalIcon !== "auto") return args.withExternalIcon;
+  return isExternalLink(args.href ?? "");
+};
+</script>
+
+<template>
+  <OnyxFlyoutMenu class="onyx-nav-button">
+    <button
+      class="onyx-nav-button__trigger onyx-text"
+      :class="{
+        'onyx-nav-button--active': props.active,
+      }"
+      @click="props.href && emit('click', props.href)"
+    >
+      <slot>
+        <span>{{ props.label }}</span>
+        <OnyxIcon
+          v-if="shouldShowExternalIcon(props)"
+          class="onyx-nav-button__icon"
+          :icon="arrowSmallUpRight"
+          size="16px"
+        />
+      </slot>
+    </button>
+    <template v-if="slots.children" #options>
+      <slot name="children"></slot>
+    </template>
+  </OnyxFlyoutMenu>
+</template>
+
+<style lang="scss">
+@use "../../styles/mixins/layers.scss";
+
+.onyx-nav-button {
+  @include layers.component() {
+    $gap: var(--onyx-spacing-2xs);
+
+    &__trigger {
+      display: inline-flex;
+      position: relative;
+      height: 2.5rem;
+      width: max-content;
+      padding: var(--onyx-spacing-2xs) var(--onyx-spacing-md);
+      justify-content: center;
+      align-items: center;
+      gap: $gap;
+      flex-shrink: 0;
+      border-radius: var(--onyx-radius-sm);
+      background: var(--onyx-color-base-background-blank);
+      text-decoration: none;
+      font-family: var(--onyx-font-family);
+      color: var(--onyx-color-text-icons-neutral-medium);
+      border: none;
+      cursor: pointer;
+
+      &:focus-visible {
+        outline: 0.25rem solid var(--onyx-color-base-secondary-200);
+        background-color: var(--onyx-color-base-neutral-200);
+      }
+    }
+
+    &:hover {
+      .onyx-nav-button__trigger {
+        background-color: var(--onyx-color-base-neutral-200);
+      }
+    }
+
+    &--active {
+      color: var(--onyx-color-text-icons-secondary-intense);
+      font-weight: 600;
+
+      &::after {
+        content: " ";
+        position: absolute;
+        width: 100%;
+        height: 0.125rem;
+        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);
+      }
+    }
+
+    &__icon {
+      align-self: flex-start;
+      margin-left: calc(-1 * $gap);
+    }
+  }
+}
+</style>
diff --git a/packages/sit-onyx/src/components/OnyxNavButton/types.ts b/packages/sit-onyx/src/components/OnyxNavButton/types.ts
new file mode 100644
index 0000000000..acbe8369a0
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxNavButton/types.ts
@@ -0,0 +1,21 @@
+export type OnyxNavButtonProps = {
+  /**
+   * Label to show inside the Nav item.
+   */
+  label: string;
+  /**
+   * The href of the nav item.
+   */
+  href?: string;
+  /**
+   * Whether the nav item is currently active.
+   * If any nested option is active, the parent nav item will also be marked as active.
+   */
+  active?: boolean;
+  /**
+   * Whether to show the external link icon.
+   * If set to `auto`, it will be shown when the `href` leads to another website
+   * (starting with "http://" or "https://") and will be hidden otherwise.
+   */
+  withExternalIcon?: boolean | "auto";
+};
diff --git a/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.stories.ts b/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.stories.ts
index a387ce3f52..0de0c115d3 100644
--- a/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.stories.ts
@@ -46,7 +46,7 @@ export const Active = {
 /**
  * This example shows the nav item with nested options.
  */
-export const WithOptions = {
+export const WithOptions: Story = {
   args: {
     ...Default.args,
     options: [
@@ -57,7 +57,13 @@ export const WithOptions = {
       { label: "Nested Item 5", href: "#5" },
     ],
   },
-} satisfies Story;
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `<div style="height: 16rem"> <story /> </div>`,
+    }),
+  ],
+};
 
 /**
  * This example shows the nav item with additional content (a dot badge in this case).
diff --git a/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.vue b/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.vue
index 9580a16d2e..c9667305ff 100644
--- a/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.vue
+++ b/packages/sit-onyx/src/components/OnyxNavItem/OnyxNavItem.vue
@@ -1,3 +1,10 @@
+<script lang="ts">
+/**
+ *  @deprecated
+ * Will be replaced by OnyxNavButton
+ */
+export default {};
+</script>
 <script lang="ts" setup>
 import arrowSmallUpRight from "@sit-onyx/icons/arrow-small-up-right.svg?raw";
 import { injectI18n } from "../../i18n";
diff --git a/packages/sit-onyx/src/components/OnyxUserMenu/future/OnyxUserMenu.stories.ts b/packages/sit-onyx/src/components/OnyxUserMenu/future/OnyxUserMenu.stories.ts
new file mode 100644
index 0000000000..99fd84a986
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxUserMenu/future/OnyxUserMenu.stories.ts
@@ -0,0 +1,55 @@
+import logout from "@sit-onyx/icons/logout.svg?raw";
+import settings from "@sit-onyx/icons/settings.svg?raw";
+import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h } from "vue";
+import OnyxUserMenu from "./OnyxUserMenu.vue";
+
+/**
+ * The user menu is intended to be used inside the navigation bar to display user-related information and actions.
+ */
+const meta: Meta<typeof OnyxUserMenu> = {
+  title: "future/UserMenu",
+  ...defineStorybookActionsAndVModels({
+    component: OnyxUserMenu,
+    events: ["optionClick"],
+    argTypes: {
+      avatar: { control: { type: "text" } },
+      footer: { control: { disable: true } },
+    },
+    decorators: [
+      (story) => ({
+        components: { story },
+        template: `<div style="margin-left: 4rem; margin-bottom: 16rem;"> <story /> </div>`,
+      }),
+    ],
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxUserMenu>;
+
+/**
+ * This example shows a default user menu.
+ */
+export const Default = {
+  args: {
+    username: "Jane Doe",
+    description: "Company Name",
+    options: [
+      { value: "/settings", label: "Settings", icon: settings },
+      { value: "logout", label: "Logout", icon: logout, color: "danger" },
+    ],
+    footer: () => ["App version", h("span", { class: "onyx-text--monospace" }, "1.0.0")],
+  },
+} satisfies Story;
+
+/**
+ * This example shows a user menu with minimal data.
+ */
+export const WithMinimalData = {
+  args: {
+    username: "Jane Doe",
+    options: Default.args.options,
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxUserMenu/future/OnyxUserMenu.vue b/packages/sit-onyx/src/components/OnyxUserMenu/future/OnyxUserMenu.vue
new file mode 100644
index 0000000000..b1060b6590
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxUserMenu/future/OnyxUserMenu.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup generic="TValue extends SelectOptionValue = SelectOptionValue">
+import chevronLeftSmall from "@sit-onyx/icons/chevron-left-small.svg?raw";
+import { computed } from "vue";
+import { injectI18n } from "../../../i18n";
+import type { SelectOptionValue } from "../../../types";
+import OnyxAvatar from "../../OnyxAvatar/OnyxAvatar.vue";
+import OnyxFlyoutMenu from "../../OnyxFlyoutMenu/future/OnyxFlyoutMenu.vue";
+import OnyxIcon from "../../OnyxIcon/OnyxIcon.vue";
+import OnyxListItem from "../../OnyxListItem/OnyxListItem.vue";
+import type { OnyxUserMenuProps } from "../types";
+
+const props = defineProps<OnyxUserMenuProps<TValue>>();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when an option is clicked.
+   */
+  optionClick: [value: TValue];
+}>();
+
+const slots = defineSlots<{
+  /**
+   * Optional footer content to display at the bottom.
+   */
+  footer?(): unknown;
+}>();
+
+const { t } = injectI18n();
+
+const avatar = computed(() => {
+  if (typeof props.avatar === "object") return { ...props.avatar, label: props.username };
+  return { src: props.avatar, label: props.username };
+});
+</script>
+
+<template>
+  <div class="onyx-user-menu">
+    <OnyxFlyoutMenu class="onyx-user-menu__flyout" :aria-label="t('navigation.userMenuLabel')">
+      <button class="onyx-user-menu__trigger onyx-text">
+        <OnyxAvatar v-bind="avatar" size="24px" />
+        <span class="onyx-truncation-ellipsis"> {{ props.username }}</span>
+        <OnyxIcon class="onyx-user-menu__chevron" :icon="chevronLeftSmall" />
+      </button>
+      <template #header>
+        <div class="onyx-user-menu__header">
+          <OnyxAvatar v-bind="avatar" />
+
+          <div class="onyx-truncation-ellipsis">
+            <div class="onyx-user-menu__username onyx-text onyx-truncation-ellipsis">
+              {{ props.username }}
+            </div>
+            <div
+              v-if="props.description"
+              class="onyx-user-menu__description onyx-text--small onyx-truncation-ellipsis"
+            >
+              {{ props.description }}
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #options>
+        <OnyxListItem
+          v-for="item in props.options"
+          :key="item.value.toString()"
+          :class="{
+            'onyx-user-menu-item--danger': item.color === 'danger',
+          }"
+          :color="item.color"
+          @click="emit('optionClick', item.value)"
+        >
+          <OnyxIcon v-if="item.icon" :icon="item.icon" />{{ item.label }}
+        </OnyxListItem>
+      </template>
+
+      <template v-if="!!slots.footer" #footer>
+        <div class="onyx-user-menu__footer onyx-text--small">
+          <slot name="footer"></slot>
+        </div>
+      </template>
+    </OnyxFlyoutMenu>
+  </div>
+</template>
+
+<style lang="scss">
+@use "../../../styles/mixins/layers.scss";
+
+.onyx-user-menu {
+  @include layers.component() {
+    --onyx-user-menu-height: 2.5rem;
+
+    font-family: var(--onyx-font-family);
+    width: max-content;
+    position: relative;
+
+    &:focus-within,
+    &:hover {
+      outline: 0;
+
+      .onyx-user-menu__trigger[aria-expanded="true"] {
+        outline: 0.25rem solid var(--onyx-color-base-secondary-200);
+        background-color: var(--onyx-color-base-neutral-200);
+
+        .onyx-user-menu__chevron {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    &__trigger {
+      border-radius: var(--onyx-radius-sm);
+      border: none;
+      background: var(--onyx-color-base-background-blank);
+
+      padding: var(--onyx-spacing-2xs) var(--onyx-spacing-md);
+      display: flex;
+      align-items: center;
+      gap: var(--onyx-spacing-2xs);
+      color: var(--onyx-color-text-icons-neutral-medium);
+      cursor: pointer;
+      margin-left: auto;
+      font-weight: 600;
+
+      &:hover {
+        background-color: var(--onyx-color-base-neutral-200);
+      }
+
+      &:focus {
+        outline: 0;
+      }
+    }
+
+    &__flyout {
+      .onyx-future-flyout-menu__list {
+        right: 0;
+      }
+    }
+
+    &__chevron {
+      transition: transform var(--onyx-duration-sm);
+    }
+
+    &__header {
+      border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
+      padding: var(--onyx-spacing-md);
+      color: var(--onyx-color-text-icons-neutral-intense);
+
+      display: flex;
+      align-items: center;
+      gap: var(--onyx-spacing-md);
+      text-align: left;
+    }
+
+    &__username {
+      font-weight: 600;
+    }
+
+    &__description {
+      color: var(--onyx-color-text-icons-neutral-soft);
+      font-weight: 600;
+    }
+
+    &__footer {
+      border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
+      padding: var(--onyx-spacing-4xs) var(--onyx-spacing-md);
+      color: var(--onyx-color-text-icons-neutral-soft);
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--onyx-spacing-2xs);
+    }
+  }
+}
+</style>
diff --git a/packages/sit-onyx/src/components/OnyxUserMenu/future/readme.md b/packages/sit-onyx/src/components/OnyxUserMenu/future/readme.md
new file mode 100644
index 0000000000..2b42bbcbae
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxUserMenu/future/readme.md
@@ -0,0 +1,3 @@
+# OnyxUserMenu
+
+This is the new (future) version of OnyxUserMenu component. The strucuture of the component is optimized and it will replace the current OnyxUserMenu in the future.
diff --git a/packages/sit-onyx/src/index.ts b/packages/sit-onyx/src/index.ts
index eceaac4a1e..7c9191a243 100644
--- a/packages/sit-onyx/src/index.ts
+++ b/packages/sit-onyx/src/index.ts
@@ -64,6 +64,9 @@ export * from "./components/OnyxNavAppArea/types";
 export { default as OnyxNavBar } from "./components/OnyxNavBar/OnyxNavBar.vue";
 export * from "./components/OnyxNavBar/types";
 
+export { default as OnyxNavButton } from "./components/OnyxNavButton/OnyxNavButton.vue";
+export * from "./components/OnyxNavButton/types";
+
 export { default as OnyxNavItem } from "./components/OnyxNavItem/OnyxNavItem.vue";
 export * from "./components/OnyxNavItem/types";