diff --git a/.changeset/add-evo-menu.md b/.changeset/add-evo-menu.md
new file mode 100644
index 00000000000..f6609758a0f
--- /dev/null
+++ b/.changeset/add-evo-menu.md
@@ -0,0 +1,7 @@
+---
+"@ebay/skin": patch
+"@evo-web/marko": patch
+"@evo-web/react": patch
+---
+
+Add EvoMenu to React and align its accessible naming API with Marko using `a11yText` and `a11yLabelId`.
diff --git a/.claude/skills/evo-app-migrate-react/SKILL.md b/.claude/skills/evo-app-migrate-react/SKILL.md
index 4b2bf2d152c..79189451eb8 100644
--- a/.claude/skills/evo-app-migrate-react/SKILL.md
+++ b/.claude/skills/evo-app-migrate-react/SKILL.md
@@ -75,6 +75,7 @@ When migrating a listed component, read the linked file completely and apply the
 - `ebay-filter-chip`: [evo-filter-chip.md](components/evo-filter-chip.md)
 - `ebay-icon-button`: [evo-icon-button.md](components/evo-icon-button.md)
 - `ebay-lightbox-dialog`: [evo-dialog.md](components/evo-dialog.md)
+- `ebay-menu`: [evo-menu.md](components/evo-menu.md)
 - `ebay-progress-spinner`: [evo-progress-spinner.md](components/evo-progress-spinner.md)
 - `ebay-tabs`: [evo-tabs.md](components/evo-tabs.md)
 - `ebay-textbox`: [evo-input.md](components/evo-input.md) / [evo-textarea.md](components/evo-textarea.md)
diff --git a/.claude/skills/evo-app-migrate-react/components/evo-menu.md b/.claude/skills/evo-app-migrate-react/components/evo-menu.md
new file mode 100644
index 00000000000..5fb533de8e9
--- /dev/null
+++ b/.claude/skills/evo-app-migrate-react/components/evo-menu.md
@@ -0,0 +1,128 @@
+# ebay-menu → evo-menu
+
+EvoMenu uses an explicit compound-component API. Wrap all navigable items in `EvoMenuItems`, and use the item and group component that matches each item's behavior.
+
+## Command menu, badge, separator, and footer
+
+**Before:**
+
+```tsx
+import {
+  EbayMenu,
+  EbayMenuItem,
+  EbayMenuSeparator,
+} from "@ebay/ui-core-react/ebay-menu";
+
+<EbayMenu onSelect={(_, { index }) => handleSelect(index)}>
+  <EbayMenuItem badgeNumber={5} badgeAriaLabel="5 unread messages">
+    Messages
+  </EbayMenuItem>
+  <EbayMenuSeparator />
+  <EbayMenuItem>Settings</EbayMenuItem>
+</EbayMenu>;
+```
+
+**After:**
+
+```tsx
+import { EvoButton } from "@evo-web/react/button";
+import {
+  EvoMenu,
+  EvoMenuFooter,
+  EvoMenuItem,
+  EvoMenuItemBadge,
+  EvoMenuItems,
+  EvoMenuSeparator,
+} from "@evo-web/react/menu";
+
+<EvoMenu>
+  <EvoMenuItems a11yText="Actions">
+    <EvoMenuItem onSelect={handleMessagesSelect}>
+      Messages
+      <EvoMenuItemBadge number={5} a11yText="5 unread messages" />
+    </EvoMenuItem>
+    <EvoMenuSeparator />
+    <EvoMenuItem onSelect={handleSettingsSelect}>Settings</EvoMenuItem>
+  </EvoMenuItems>
+  <EvoMenuFooter>
+    <EvoButton priority="tertiary">Apply</EvoButton>
+  </EvoMenuFooter>
+</EvoMenu>;
+```
+
+`EvoMenuFooter` is optional. When footer content is needed, place it next to `EvoMenuItems` and use `EvoButton` directly instead of a menu-specific footer button.
+
+## Radio menu
+
+**Before:**
+
+```tsx
+<EbayMenu
+  type="radio"
+  checked={1}
+  onChange={(_, { index }) => handleSortChange(index)}
+>
+  <EbayMenuItem value="price">Price</EbayMenuItem>
+  <EbayMenuItem value="distance">Distance</EbayMenuItem>
+</EbayMenu>
+```
+
+**After:**
+
+```tsx
+<EvoMenu>
+  <EvoMenuItems a11yText="Sort by">
+    <EvoMenuRadioGroup
+      defaultSelected="distance"
+      onSelectedChange={handleSortChange}
+    >
+      <EvoMenuRadioItem value="price">Price</EvoMenuRadioItem>
+      <EvoMenuRadioItem value="distance">Distance</EvoMenuRadioItem>
+    </EvoMenuRadioGroup>
+  </EvoMenuItems>
+</EvoMenu>
+```
+
+Use `selected` instead of `defaultSelected` when the radio group is controlled. Selection callbacks now receive the selected item value rather than its child index.
+
+## Checkbox menu
+
+**Before:**
+
+```tsx
+<EbayMenu
+  type="checkbox"
+  onChange={(_, { checkedValues }) => handleFilterChange(checkedValues)}
+>
+  <EbayMenuItem value="shipping" checked>
+    Free shipping
+  </EbayMenuItem>
+  <EbayMenuItem value="returns">Free returns</EbayMenuItem>
+</EbayMenu>
+```
+
+**After:**
+
+```tsx
+<EvoMenu>
+  <EvoMenuItems a11yText="Filters">
+    <EvoMenuCheckboxGroup
+      defaultSelected={["shipping"]}
+      onSelectedChange={handleFilterChange}
+    >
+      <EvoMenuCheckboxItem value="shipping">Free shipping</EvoMenuCheckboxItem>
+      <EvoMenuCheckboxItem value="returns">Free returns</EvoMenuCheckboxItem>
+    </EvoMenuCheckboxGroup>
+  </EvoMenuItems>
+</EvoMenu>
+```
+
+Use `selected` instead of `defaultSelected` when the checkbox group is controlled. Radio and checkbox item `value` props are required; selection never falls back to child indexes.
+
+## Additional changes
+
+- Use `a11yText` on `EvoMenuItems` for an accessible name, or use `a11yLabelId` when an external element labels the menu. Do not use both.
+- Move plain-menu `onSelect` to each `EvoMenuItem`; move parent `onClick` handlers to the applicable items.
+- Move `onKeyDown` to `EvoMenuItems` when needed. It receives the native keyboard event without legacy index or checked callback data.
+- Remove `baseEl`, `priority`, `autofocus`, `forwardedRef`, and `menuRef`. The root is a span, refs use native React 19 `ref`, and `EvoMenuItems` accepts its own ref.
+- `reverse`, `fixed`, `fixWidth`, `classPrefix`, and native HTML attributes remain supported.
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000000..8d35d1f9eec
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+# Generated changelogs are managed by Changesets
+packages/*/CHANGELOG.md
diff --git a/packages/ebayui-core-react/.prettierignore b/packages/ebayui-core-react/.prettierignore
index bc2718ad916..0951e14ded5 100644
--- a/packages/ebayui-core-react/.prettierignore
+++ b/packages/ebayui-core-react/.prettierignore
@@ -1,6 +1,8 @@
 # Autogenerated files
+CHANGELOG.md
 src/ebay-icon/icons/*
 src/ebay-icon/__tests__/constants.ts
+src/ebay-icon/__tests__/inline.stories.tsx
 src/ebay-icon/types.ts
 src/ebay-flag/__tests__/constants.ts
 src/ebay-flag/types.ts
diff --git a/packages/ebayui-core-react/eslint.config.mjs b/packages/ebayui-core-react/eslint.config.mjs
index 419cf8afb52..035cb22350e 100644
--- a/packages/ebayui-core-react/eslint.config.mjs
+++ b/packages/ebayui-core-react/eslint.config.mjs
@@ -9,7 +9,16 @@ import tseslint from "typescript-eslint";
 
 export default tseslint.config(
     {
-        ignores: ["dist", "config", "scripts", ".storybook", "vitest.config.ts", "node_modules", "_site"],
+        ignores: [
+            "dist",
+            "config",
+            "scripts",
+            ".storybook",
+            "vitest.config.ts",
+            "node_modules",
+            "_site",
+            "src/ebay-icon/__tests__/inline.stories.tsx",
+        ],
     },
     eslint.configs.recommended,
     ...tseslint.configs.recommended,
diff --git a/packages/evo-marko/src/tags/evo-menu-button/index.marko b/packages/evo-marko/src/tags/evo-menu-button/index.marko
index 750bca1d47f..f9d5cd6b81e 100644
--- a/packages/evo-marko/src/tags/evo-menu-button/index.marko
+++ b/packages/evo-marko/src/tags/evo-menu-button/index.marko
@@ -4,7 +4,8 @@ import Button, { type Input as ButtonInput } from "<evo-button>";
 import { type Input as MenuInput } from "<evo-menu>";
 export interface Input<
     Index extends number | string | (number | string)[],
-> extends Omit<MenuInput<Index>, "variant"> {
+> extends Omit<MenuInput<Index>, "a11yLabelId" | "a11yText" | "variant">,
+        Pick<Marko.HTML.Span, "aria-label" | "aria-labelledby"> {
     open?: boolean;
     openChange?: (open: boolean) => void;
     collapseOnSelect?: boolean;
diff --git a/packages/evo-marko/src/tags/evo-menu/index.marko b/packages/evo-marko/src/tags/evo-menu/index.marko
index 54dab5078ea..0fed4d443b5 100644
--- a/packages/evo-marko/src/tags/evo-menu/index.marko
+++ b/packages/evo-marko/src/tags/evo-menu/index.marko
@@ -7,7 +7,11 @@ export interface Item extends Marko.HTML.Div {
 }
 export interface Input<
     Index extends number | string | (number | string)[],
-> extends Marko.HTML.Span {
+> extends Omit<Marko.HTML.Span, "aria-label" | "aria-labelledby"> {
+    /** Localized accessible name for the menu. Cannot be used with `a11yLabelId`. */
+    a11yText?: string;
+    /** ID of the element that labels the menu. Cannot be used with `a11yText`. */
+    a11yLabelId?: string;
     selected?: Index;
     selectedChange?: (selected: Index) => void;
     item?: Marko.AttrTag<Item>;
@@ -23,6 +27,8 @@ export interface Input<
 <const/{
     class: inputClass,
     classPrefix,
+    a11yText,
+    a11yLabelId,
     selected: inputIndex,
     selectedChange,
     reverse,
@@ -32,8 +38,6 @@ export interface Input<
     typeaheadTimeoutLength,
     item: items,
     variant,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
     ...htmlInput
 }=input>
 <const/isRadio=typeof inputIndex === "number" || typeof inputIndex === "string">
@@ -58,8 +62,8 @@ export interface Input<
     <div
         role="menu"
         class=`${baseClass}__items`
-        aria-label=ariaLabel
-        aria-labelledby=ariaLabelledby
+        aria-label=a11yText
+        aria-labelledby=a11yLabelId
         id=menu>
         <const/$items: Iterable<HTMLElement>=$item> // TODO: remove when Marko TS works
         <evo-roving-tabindex/rovTabindex
diff --git a/packages/evo-marko/src/tags/evo-menu/menu.stories.ts b/packages/evo-marko/src/tags/evo-menu/menu.stories.ts
index 8a31d624d6f..8f2240cd48c 100644
--- a/packages/evo-marko/src/tags/evo-menu/menu.stories.ts
+++ b/packages/evo-marko/src/tags/evo-menu/menu.stories.ts
@@ -33,6 +33,18 @@ export default {
   },
 
   argTypes: {
+    a11yText: {
+      type: "string",
+      control: "text",
+      description:
+        "Localized accessible name for the menu. Cannot be used with `a11yLabelId`.",
+    },
+    a11yLabelId: {
+      type: "string",
+      control: "text",
+      description:
+        "ID of the element that labels the menu. Cannot be used with `a11yText`.",
+    },
     selected: {
       controllable: true,
       description:
diff --git a/packages/evo-marko/src/tags/evo-menu/test/__snapshots__/test.server.ts.snap b/packages/evo-marko/src/tags/evo-menu/test/__snapshots__/test.server.ts.snap
index 338a3eb08fe..c8437eb61b3 100644
--- a/packages/evo-marko/src/tags/evo-menu/test/__snapshots__/test.server.ts.snap
+++ b/packages/evo-marko/src/tags/evo-menu/test/__snapshots__/test.server.ts.snap
@@ -242,12 +242,12 @@ exports[`menu > renders basic version 1`] = `
 </span>"
 `;
 
-exports[`menu > renders with aria-label 1`] = `
+exports[`menu > renders with a11yLabelId 1`] = `
 "<span
-  arialabel="test"
   class="menu"
 >
   <div
+    aria-labelledby="test"
     class="menu__items"
     id="GENERATED-0"
     role="menu"
@@ -321,12 +321,12 @@ exports[`menu > renders with aria-label 1`] = `
 </span>"
 `;
 
-exports[`menu > renders with aria-labelledby 1`] = `
+exports[`menu > renders with a11yText 1`] = `
 "<span
-  arialabelledby="test"
   class="menu"
 >
   <div
+    aria-label="test"
     class="menu__items"
     id="GENERATED-0"
     role="menu"
diff --git a/packages/evo-marko/src/tags/evo-menu/test/test.server.ts b/packages/evo-marko/src/tags/evo-menu/test/test.server.ts
index 357448a42cc..8c6d0b5a00b 100644
--- a/packages/evo-marko/src/tags/evo-menu/test/test.server.ts
+++ b/packages/evo-marko/src/tags/evo-menu/test/test.server.ts
@@ -11,12 +11,12 @@ describe("menu", () => {
     await snapshotHTML(Default);
   });
 
-  it("renders with aria-label", async () => {
-    await snapshotHTML(Default, { ariaLabel: "test" });
+  it("renders with a11yText", async () => {
+    await snapshotHTML(Default, { a11yText: "test" });
   });
 
-  it("renders with aria-labelledby", async () => {
-    await snapshotHTML(Default, { ariaLabelledBy: "test" });
+  it("renders with a11yLabelId", async () => {
+    await snapshotHTML(Default, { a11yLabelId: "test" });
   });
 
   it("renders with reverse=true", async () => {
diff --git a/packages/evo-react/src/menu/README.md b/packages/evo-react/src/menu/README.md
new file mode 100644
index 00000000000..0d9d27938a4
--- /dev/null
+++ b/packages/evo-react/src/menu/README.md
@@ -0,0 +1,5 @@
+# EvoMenu
+
+## Documentation
+
+[Storybook](https://opensource.ebay.com/evo-web/react/?path=/docs/building-blocks-evo-menu--documentation)
diff --git a/packages/evo-react/src/menu/context.tsx b/packages/evo-react/src/menu/context.tsx
new file mode 100644
index 00000000000..d7a933e49f2
--- /dev/null
+++ b/packages/evo-react/src/menu/context.tsx
@@ -0,0 +1,154 @@
+import { createContext, use, useMemo } from "react";
+import type { ReactNode } from "react";
+import type { RovingTabIndex } from "../utils/use-roving-tab-index";
+import type { EvoMenuVariant, MenuValue } from "./types";
+
+type MenuContextValue = {
+  baseClass: string;
+  classPrefix?: string;
+  variant: EvoMenuVariant;
+  reverse: boolean;
+  fixed: boolean;
+  fixWidth: boolean;
+  typeaheadTimeoutLength?: number;
+};
+
+const MenuContext = createContext<MenuContextValue | undefined>(undefined);
+
+export function useMenuContext() {
+  const context = use(MenuContext);
+  if (!context) {
+    throw new Error("Menu components must be used within an EvoMenu component");
+  }
+  return context;
+}
+
+type MenuProviderProps = MenuContextValue & {
+  children?: ReactNode;
+};
+
+export function MenuProvider({
+  baseClass,
+  classPrefix,
+  variant,
+  reverse,
+  fixed,
+  fixWidth,
+  typeaheadTimeoutLength,
+  children,
+}: MenuProviderProps) {
+  const value = useMemo(
+    () => ({
+      baseClass,
+      classPrefix,
+      variant,
+      reverse,
+      fixed,
+      fixWidth,
+      typeaheadTimeoutLength,
+    }),
+    [
+      baseClass,
+      classPrefix,
+      variant,
+      reverse,
+      fixed,
+      fixWidth,
+      typeaheadTimeoutLength,
+    ],
+  );
+
+  return <MenuContext value={value}>{children}</MenuContext>;
+}
+
+type MenuItemsContextValue = {
+  rovingTabIndex: RovingTabIndex<string>;
+};
+
+const MenuItemsContext = createContext<MenuItemsContextValue | undefined>(
+  undefined,
+);
+
+export function useMenuItemsContext() {
+  const context = use(MenuItemsContext);
+  if (!context) {
+    throw new Error("Menu items must be used within an EvoMenuItems component");
+  }
+  return context;
+}
+
+type MenuItemsProviderProps = MenuItemsContextValue & {
+  children?: ReactNode;
+};
+
+export function MenuItemsProvider({
+  rovingTabIndex,
+  children,
+}: MenuItemsProviderProps) {
+  const value = useMemo(() => ({ rovingTabIndex }), [rovingTabIndex]);
+  return <MenuItemsContext value={value}>{children}</MenuItemsContext>;
+}
+
+type RadioGroupContextValue = {
+  selected: MenuValue | null;
+  select: (value: MenuValue) => void;
+};
+
+const RadioGroupContext = createContext<RadioGroupContextValue | undefined>(
+  undefined,
+);
+
+export function useMenuRadioGroupContext() {
+  const context = use(RadioGroupContext);
+  if (!context) {
+    throw new Error(
+      "EvoMenuRadioItem must be used within an EvoMenuRadioGroup component",
+    );
+  }
+  return context;
+}
+
+type RadioGroupProviderProps = RadioGroupContextValue & {
+  children?: ReactNode;
+};
+
+export function RadioGroupProvider({
+  selected,
+  select,
+  children,
+}: RadioGroupProviderProps) {
+  const value = useMemo(() => ({ selected, select }), [selected, select]);
+  return <RadioGroupContext value={value}>{children}</RadioGroupContext>;
+}
+
+type CheckboxGroupContextValue = {
+  selected: readonly MenuValue[];
+  toggle: (value: MenuValue) => void;
+};
+
+const CheckboxGroupContext = createContext<
+  CheckboxGroupContextValue | undefined
+>(undefined);
+
+export function useMenuCheckboxGroupContext() {
+  const context = use(CheckboxGroupContext);
+  if (!context) {
+    throw new Error(
+      "EvoMenuCheckboxItem must be used within an EvoMenuCheckboxGroup component",
+    );
+  }
+  return context;
+}
+
+type CheckboxGroupProviderProps = CheckboxGroupContextValue & {
+  children?: ReactNode;
+};
+
+export function CheckboxGroupProvider({
+  selected,
+  toggle,
+  children,
+}: CheckboxGroupProviderProps) {
+  const value = useMemo(() => ({ selected, toggle }), [selected, toggle]);
+  return <CheckboxGroupContext value={value}>{children}</CheckboxGroupContext>;
+}
diff --git a/packages/evo-react/src/menu/index.ts b/packages/evo-react/src/menu/index.ts
new file mode 100644
index 00000000000..2c94e5befba
--- /dev/null
+++ b/packages/evo-react/src/menu/index.ts
@@ -0,0 +1,27 @@
+export { EvoMenu } from "./menu";
+export { EvoMenuItems } from "./menu-items";
+export {
+  EvoMenuItem,
+  EvoMenuRadioItem,
+  EvoMenuCheckboxItem,
+} from "./menu-item";
+export { EvoMenuRadioGroup } from "./menu-radio-group";
+export { EvoMenuCheckboxGroup } from "./menu-checkbox-group";
+export { EvoMenuItemBadge } from "./menu-item-badge";
+export { EvoMenuSeparator } from "./menu-separator";
+export { EvoMenuFooter } from "./menu-footer";
+export type {
+  EvoMenuProps,
+  EvoMenuItemsProps,
+  EvoMenuItemProps,
+  EvoMenuRadioItemProps,
+  EvoMenuCheckboxItemProps,
+  EvoMenuRadioGroupProps,
+  EvoMenuCheckboxGroupProps,
+  EvoMenuItemBadgeProps,
+  EvoMenuSeparatorProps,
+  EvoMenuFooterProps,
+  EvoMenuItemSelectEvent,
+  EvoMenuVariant,
+  MenuValue,
+} from "./types";
diff --git a/packages/evo-react/src/menu/menu-checkbox-group.tsx b/packages/evo-react/src/menu/menu-checkbox-group.tsx
new file mode 100644
index 00000000000..7615bb97421
--- /dev/null
+++ b/packages/evo-react/src/menu/menu-checkbox-group.tsx
@@ -0,0 +1,37 @@
+import { useCallback, useState } from "react";
+import { CheckboxGroupProvider } from "./context";
+import type { EvoMenuCheckboxGroupProps, MenuValue } from "./types";
+
+export function EvoMenuCheckboxGroup<Value extends MenuValue>({
+  selected: selectedProp,
+  defaultSelected = [],
+  onSelectedChange,
+  children,
+}: EvoMenuCheckboxGroupProps<Value>) {
+  const [uncontrolledSelected, setUncontrolledSelected] = useState<Value[]>(
+    () => [...defaultSelected],
+  );
+  const isControlled = selectedProp !== undefined;
+  const selected = isControlled ? selectedProp : uncontrolledSelected;
+
+  const toggle = useCallback(
+    (value: MenuValue) => {
+      const itemValue = value as Value;
+      const nextSelected = selected.includes(itemValue)
+        ? selected.filter((selectedValue) => selectedValue !== itemValue)
+        : [...selected, itemValue];
+
+      if (!isControlled) {
+        setUncontrolledSelected(nextSelected);
+      }
+      onSelectedChange?.(nextSelected);
+    },
+    [isControlled, onSelectedChange, selected],
+  );
+
+  return (
+    <CheckboxGroupProvider selected={selected} toggle={toggle}>
+      {children}
+    </CheckboxGroupProvider>
+  );
+}
diff --git a/packages/evo-react/src/menu/menu-footer.tsx b/packages/evo-react/src/menu/menu-footer.tsx
new file mode 100644
index 00000000000..89eb9ca08d2
--- /dev/null
+++ b/packages/evo-react/src/menu/menu-footer.tsx
@@ -0,0 +1,16 @@
+import classNames from "classnames";
+import { useMenuContext } from "./context";
+import type { EvoMenuFooterProps } from "./types";
+
+export function EvoMenuFooter({
+  className,
+  children,
+  ...rest
+}: EvoMenuFooterProps) {
+  const { baseClass } = useMenuContext();
+  return (
+    <div {...rest} className={classNames(`${baseClass}__footer`, className)}>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/evo-react/src/menu/menu-item-badge.tsx b/packages/evo-react/src/menu/menu-item-badge.tsx
new file mode 100644
index 00000000000..85514c7f3ac
--- /dev/null
+++ b/packages/evo-react/src/menu/menu-item-badge.tsx
@@ -0,0 +1,6 @@
+import { EvoBadge } from "../badge/badge";
+import type { EvoMenuItemBadgeProps } from "./types";
+
+export function EvoMenuItemBadge(props: EvoMenuItemBadgeProps) {
+  return <EvoBadge {...props} type="menu" />;
+}
diff --git a/packages/evo-react/src/menu/menu-item.tsx b/packages/evo-react/src/menu/menu-item.tsx
new file mode 100644
index 00000000000..78b0c0d6abd
--- /dev/null
+++ b/packages/evo-react/src/menu/menu-item.tsx
@@ -0,0 +1,190 @@
+import { useId } from "react";
+import type { Ref, RefObject } from "react";
+import classNames from "classnames";
+import { EvoIconCheckboxChecked18 } from "../icon/icons/checkbox-checked-18";
+import { EvoIconCheckboxUnchecked18 } from "../icon/icons/checkbox-unchecked-18";
+import { EvoIconRadioChecked18 } from "../icon/icons/radio-checked-18";
+import { EvoIconRadioUnchecked18 } from "../icon/icons/radio-unchecked-18";
+import { EvoIconTick16 } from "../icon/icons/tick-16";
+import { useRefTee } from "../utils/use-ref-tee";
+import { useRovingTabIndexItem } from "../utils/use-roving-tab-index";
+import {
+  useMenuCheckboxGroupContext,
+  useMenuContext,
+  useMenuItemsContext,
+  useMenuRadioGroupContext,
+} from "./context";
+import type {
+  EvoMenuCheckboxItemProps,
+  EvoMenuItemProps,
+  EvoMenuRadioItemProps,
+  MenuValue,
+} from "./types";
+
+type MenuItemBaseProps = EvoMenuItemProps & {
+  role: "menuitem" | "menuitemradio" | "menuitemcheckbox";
+  "aria-checked"?: boolean;
+  "data-value"?: MenuValue;
+};
+
+function MenuItemBase({
+  role,
+  "aria-checked": ariaChecked,
+  "data-value": dataValue,
+  className,
+  children,
+  disabled = false,
+  textValue,
+  onClick,
+  onFocus,
+  onKeyDown,
+  onMouseDown,
+  onSelect,
+  ref,
+  ...rest
+}: MenuItemBaseProps) {
+  const { baseClass } = useMenuContext();
+  const { rovingTabIndex } = useMenuItemsContext();
+  const internalId = useId();
+  const [itemRef, internalItemRef] = useRefTee<HTMLDivElement | null>(
+    ref as Ref<HTMLDivElement | null>,
+    null,
+  );
+  const { tabIndex, onFocus: onRovingFocus } = useRovingTabIndexItem({
+    rovingTabIndex,
+    item: {
+      key: internalId,
+      ref: internalItemRef as RefObject<HTMLElement | null>,
+      disabled,
+      textValue,
+    },
+  });
+  return (
+    <div
+      {...rest}
+      ref={itemRef}
+      role={role}
+      data-value={dataValue}
+      aria-checked={ariaChecked}
+      aria-disabled={disabled || undefined}
+      tabIndex={tabIndex}
+      className={classNames(`${baseClass}__item`, className)}
+      onMouseDown={(event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onMouseDown?.(event);
+      }}
+      onFocus={(event) => {
+        if (disabled) {
+          return;
+        }
+        onRovingFocus(event);
+        onFocus?.(event);
+      }}
+      onClick={(event) => {
+        if (disabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          onSelect?.(event);
+        }
+      }}
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (
+          disabled ||
+          event.defaultPrevented ||
+          (event.key !== "Enter" && event.key !== " ")
+        ) {
+          return;
+        }
+
+        event.preventDefault();
+        onSelect?.(event);
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function EvoMenuItem({ children, ...rest }: EvoMenuItemProps) {
+  const { variant } = useMenuContext();
+
+  return (
+    <MenuItemBase {...rest} role="menuitem">
+      <span>{children}</span>
+      {variant === "none" && <EvoIconTick16 />}
+    </MenuItemBase>
+  );
+}
+
+export function EvoMenuRadioItem<Value extends MenuValue>({
+  value,
+  children,
+  onSelect,
+  ...rest
+}: EvoMenuRadioItemProps<Value>) {
+  const { variant } = useMenuContext();
+  const { selected, select } = useMenuRadioGroupContext();
+
+  return (
+    <MenuItemBase
+      {...rest}
+      role="menuitemradio"
+      data-value={value}
+      aria-checked={selected === value}
+      onSelect={(event) => {
+        select(value);
+        onSelect?.(event);
+      }}
+    >
+      {variant === "filter" && (
+        <>
+          <EvoIconRadioUnchecked18 className="icon--unchecked" />
+          <EvoIconRadioChecked18 className="icon--checked" />
+        </>
+      )}
+      <span>{children}</span>
+      {variant === "none" && <EvoIconTick16 />}
+    </MenuItemBase>
+  );
+}
+
+export function EvoMenuCheckboxItem<Value extends MenuValue>({
+  value,
+  children,
+  onSelect,
+  ...rest
+}: EvoMenuCheckboxItemProps<Value>) {
+  const { variant } = useMenuContext();
+  const { selected, toggle } = useMenuCheckboxGroupContext();
+
+  return (
+    <MenuItemBase
+      {...rest}
+      role="menuitemcheckbox"
+      data-value={value}
+      aria-checked={selected.includes(value)}
+      onSelect={(event) => {
+        toggle(value);
+        onSelect?.(event);
+      }}
+    >
+      {variant === "filter" && (
+        <>
+          <EvoIconCheckboxUnchecked18 className="icon--unchecked" />
+          <EvoIconCheckboxChecked18 className="icon--checked" />
+        </>
+      )}
+      <span>{children}</span>
+      {variant === "none" && <EvoIconTick16 />}
+    </MenuItemBase>
+  );
+}
diff --git a/packages/evo-react/src/menu/menu-items.tsx b/packages/evo-react/src/menu/menu-items.tsx
new file mode 100644
index 00000000000..1903318e542
--- /dev/null
+++ b/packages/evo-react/src/menu/menu-items.tsx
@@ -0,0 +1,81 @@
+import classNames from "classnames";
+import type { Ref, RefObject } from "react";
+import { MenuItemsProvider, useMenuContext } from "./context";
+import type { EvoMenuItemsProps } from "./types";
+import { useRefTee } from "../utils/use-ref-tee";
+import { useRovingTabIndex } from "../utils/use-roving-tab-index";
+import { useTypeahead } from "../utils/use-typeahead";
+
+export function EvoMenuItems({
+  a11yText,
+  a11yLabelId,
+  className,
+  children,
+  onKeyDown,
+  onKeyDownCapture,
+  ref,
+  ...rest
+}: EvoMenuItemsProps) {
+  const {
+    baseClass,
+    classPrefix,
+    reverse,
+    fixed,
+    fixWidth,
+    typeaheadTimeoutLength,
+  } = useMenuContext();
+  const [rootRef, internalRootRef] = useRefTee<HTMLElement | null>(
+    ref as Ref<HTMLElement | null>,
+    null,
+  );
+  const rovingTabIndex = useRovingTabIndex<string>({
+    containerRef: internalRootRef as RefObject<HTMLElement | null>,
+    orientation: "both",
+    shouldFocusWrap: true,
+  });
+  const { typeaheadProps } = useTypeahead({
+    getItems: rovingTabIndex.getItems,
+    focusedKey: rovingTabIndex.focusedKey,
+    onMatch: rovingTabIndex.focusKey,
+    timeoutLength: typeaheadTimeoutLength,
+  });
+
+  return (
+    <MenuItemsProvider rovingTabIndex={rovingTabIndex}>
+      <div
+        {...rest}
+        ref={rootRef}
+        aria-label={a11yText}
+        aria-labelledby={a11yLabelId}
+        role="menu"
+        tabIndex={-1}
+        className={classNames(
+          `${baseClass}__items`,
+          !classPrefix && reverse && `${baseClass}__items--reverse`,
+          !classPrefix && fixed && `${baseClass}__items--fixed`,
+          !classPrefix && fixWidth && `${baseClass}__items--fix-width`,
+          className,
+        )}
+        onKeyDownCapture={(event) => {
+          onKeyDownCapture?.(event);
+          if (!event.defaultPrevented) {
+            typeaheadProps.onKeyDownCapture(event);
+          }
+        }}
+        onKeyDown={(event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+
+          typeaheadProps.onKeyDown(event);
+          if (!event.defaultPrevented) {
+            rovingTabIndex.onKeyDown(event);
+          }
+        }}
+      >
+        {children}
+      </div>
+    </MenuItemsProvider>
+  );
+}
diff --git a/packages/evo-react/src/menu/menu-radio-group.tsx b/packages/evo-react/src/menu/menu-radio-group.tsx
new file mode 100644
index 00000000000..b6e7ad68953
--- /dev/null
+++ b/packages/evo-react/src/menu/menu-radio-group.tsx
@@ -0,0 +1,36 @@
+import { useCallback, useState } from "react";
+import { RadioGroupProvider } from "./context";
+import type { EvoMenuRadioGroupProps, MenuValue } from "./types";
+
+export function EvoMenuRadioGroup<Value extends MenuValue>({
+  selected: selectedProp,
+  defaultSelected = null,
+  onSelectedChange,
+  children,
+}: EvoMenuRadioGroupProps<Value>) {
+  const [uncontrolledSelected, setUncontrolledSelected] =
+    useState<Value | null>(defaultSelected);
+  const isControlled = selectedProp !== undefined;
+  const selected = isControlled ? selectedProp : uncontrolledSelected;
+
+  const select = useCallback(
+    (value: MenuValue) => {
+      const nextSelected = value as Value;
+      if (selected === nextSelected) {
+        return;
+      }
+
+      if (!isControlled) {
+        setUncontrolledSelected(nextSelected);
+      }
+      onSelectedChange?.(nextSelected);
+    },
+    [isControlled, onSelectedChange, selected],
+  );
+
+  return (
+    <RadioGroupProvider selected={selected} select={select}>
+      {children}
+    </RadioGroupProvider>
+  );
+}
diff --git a/packages/evo-react/src/menu/menu-separator.tsx b/packages/evo-react/src/menu/menu-separator.tsx
new file mode 100644
index 00000000000..19723e889da
--- /dev/null
+++ b/packages/evo-react/src/menu/menu-separator.tsx
@@ -0,0 +1,16 @@
+import classNames from "classnames";
+import { useMenuContext } from "./context";
+import type { EvoMenuSeparatorProps } from "./types";
+
+export function EvoMenuSeparator({
+  className,
+  ...rest
+}: EvoMenuSeparatorProps) {
+  const { baseClass } = useMenuContext();
+  return (
+    <hr
+      {...rest}
+      className={classNames(`${baseClass}__separator`, className)}
+    />
+  );
+}
diff --git a/packages/evo-react/src/menu/menu.stories.tsx b/packages/evo-react/src/menu/menu.stories.tsx
new file mode 100644
index 00000000000..559c3f34f70
--- /dev/null
+++ b/packages/evo-react/src/menu/menu.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EvoButton } from "../button/button";
+import { EvoMenu } from "./menu";
+import { EvoMenuItems } from "./menu-items";
+import {
+  EvoMenuCheckboxItem,
+  EvoMenuItem,
+  EvoMenuRadioItem,
+} from "./menu-item";
+import { EvoMenuRadioGroup } from "./menu-radio-group";
+import { EvoMenuCheckboxGroup } from "./menu-checkbox-group";
+import { EvoMenuItemBadge } from "./menu-item-badge";
+import { EvoMenuSeparator } from "./menu-separator";
+import { EvoMenuFooter } from "./menu-footer";
+
+const meta: Meta<typeof EvoMenu> = {
+  title: "building blocks/evo-menu",
+  component: EvoMenu,
+  subcomponents: {
+    EvoMenuItems,
+    EvoMenuItem,
+    EvoMenuRadioGroup,
+    EvoMenuRadioItem,
+    EvoMenuCheckboxGroup,
+    EvoMenuCheckboxItem,
+    EvoMenuItemBadge,
+    EvoMenuSeparator,
+    EvoMenuFooter,
+  },
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A compound menu component with command, single-select, and multi-select items managed by one keyboard navigation system.
+
+## Usage
+
+\`\`\`tsx
+import {
+  EvoMenu,
+  EvoMenuItems,
+  EvoMenuItem,
+  EvoMenuRadioGroup,
+  EvoMenuRadioItem,
+} from "@evo-web/react/menu";
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["filter", "none"],
+    },
+    classPrefix: {
+      control: "text",
+    },
+    reverse: {
+      control: "boolean",
+    },
+    fixed: {
+      control: "boolean",
+    },
+    fixWidth: {
+      control: "boolean",
+    },
+    typeaheadTimeoutLength: {
+      control: "number",
+      table: { defaultValue: { summary: "2000" } },
+    },
+  },
+  args: {
+    variant: "none",
+    reverse: false,
+    fixed: false,
+    fixWidth: false,
+    typeaheadTimeoutLength: 2000,
+  },
+  render(args) {
+    return (
+      <EvoMenu {...args}>
+        <EvoMenuItems a11yText="Example menu">
+          <EvoMenuItem>
+            Messages
+            <EvoMenuItemBadge number={5} a11yText="5 unread messages" />
+          </EvoMenuItem>
+          <EvoMenuItem disabled>Disabled command</EvoMenuItem>
+          <EvoMenuSeparator />
+          <EvoMenuRadioGroup defaultSelected="price">
+            <EvoMenuRadioItem value="price">Price</EvoMenuRadioItem>
+            <EvoMenuRadioItem value="distance">Distance</EvoMenuRadioItem>
+          </EvoMenuRadioGroup>
+          <EvoMenuSeparator />
+          <EvoMenuCheckboxGroup defaultSelected={["shipping"]}>
+            <EvoMenuCheckboxItem value="shipping">
+              Free shipping
+            </EvoMenuCheckboxItem>
+            <EvoMenuCheckboxItem value="returns">
+              Free returns
+            </EvoMenuCheckboxItem>
+          </EvoMenuCheckboxGroup>
+        </EvoMenuItems>
+        <EvoMenuFooter>
+          <EvoButton priority="tertiary">Apply</EvoButton>
+        </EvoMenuFooter>
+      </EvoMenu>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EvoMenu>;
+
+export const Default: Story = {};
diff --git a/packages/evo-react/src/menu/menu.tsx b/packages/evo-react/src/menu/menu.tsx
new file mode 100644
index 00000000000..d43b3e1172b
--- /dev/null
+++ b/packages/evo-react/src/menu/menu.tsx
@@ -0,0 +1,44 @@
+import classNames from "classnames";
+import { MenuProvider } from "./context";
+import type { EvoMenuProps } from "./types";
+import "@ebay/skin/menu.mjs";
+
+export function EvoMenu({
+  variant = "none",
+  classPrefix,
+  reverse = false,
+  fixed = false,
+  fixWidth = false,
+  typeaheadTimeoutLength,
+  className,
+  children,
+  ...rest
+}: EvoMenuProps) {
+  const baseClass = classPrefix || "menu";
+
+  return (
+    <MenuProvider
+      baseClass={baseClass}
+      classPrefix={classPrefix}
+      variant={variant}
+      reverse={reverse}
+      fixed={fixed}
+      fixWidth={fixWidth}
+      typeaheadTimeoutLength={typeaheadTimeoutLength}
+    >
+      <span
+        {...rest}
+        className={classNames(
+          classPrefix ? `${baseClass}__menu` : "menu",
+          variant === "filter" && `${baseClass}--filter`,
+          classPrefix && reverse && `${baseClass}__menu--reverse`,
+          classPrefix && fixed && `${baseClass}__menu--fixed`,
+          classPrefix && fixWidth && `${baseClass}__menu--fix-width`,
+          className,
+        )}
+      >
+        {children}
+      </span>
+    </MenuProvider>
+  );
+}
diff --git a/packages/evo-react/src/menu/test/__snapshots__/test.server.tsx.snap b/packages/evo-react/src/menu/test/__snapshots__/test.server.tsx.snap
new file mode 100644
index 00000000000..173544787a3
--- /dev/null
+++ b/packages/evo-react/src/menu/test/__snapshots__/test.server.tsx.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EvoMenu SSR > applies prefixed menu classes 1`] = `"<span class="menu-button__menu menu-button__menu--reverse menu-button__menu--fixed menu-button__menu--fix-width"><div aria-label="Actions" role="menu" tabindex="-1" class="menu-button__items"><div role="menuitem" tabindex="-1" class="menu-button__item"><span>Open</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div></div></span>"`;
+
+exports[`EvoMenu SSR > renders command items, a badge, a separator, and a footer 1`] = `"<span class="menu"><div aria-label="Actions" role="menu" tabindex="-1" class="menu__items"><div role="menuitem" tabindex="-1" class="menu__item"><span>Messages<span class="badge badge--circle" aria-label="5 unread messages">5</span></span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use><defs><symbol viewBox="0 0 16 16" id="icon-tick-16"><path fill-rule="evenodd" d="M13.707 5.707a1 1 0 0 0-1.414-1.414L6 10.586 3.707 8.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7Z" clip-rule="evenodd"/></symbol></defs></svg></div><hr class="menu__separator"/><div role="menuitem" aria-disabled="true" tabindex="-1" class="menu__item"><span>Disabled</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div></div><div class="menu__footer"><button class="btn btn--secondary">Apply</button></div></span>"`;
+
+exports[`EvoMenu SSR > renders selected radio and checkbox items 1`] = `"<span class="menu"><div aria-label="Preferences" role="menu" tabindex="-1" class="menu__items"><div role="menuitemradio" data-value="price" aria-checked="true" tabindex="-1" class="menu__item"><span>Price</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div><div role="menuitemradio" data-value="distance" aria-checked="false" tabindex="-1" class="menu__item"><span>Distance</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div><div role="menuitemcheckbox" data-value="shipping" aria-checked="true" tabindex="-1" class="menu__item"><span>Shipping</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div><div role="menuitemcheckbox" data-value="returns" aria-checked="false" tabindex="-1" class="menu__item"><span>Returns</span><svg class="icon icon--16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-tick-16"></use></svg></div></div></span>"`;
+
+exports[`EvoMenu SSR > renders the filter variant and custom classes 1`] = `"<span class="menu menu--filter custom-menu"><div aria-label="Filters" role="menu" tabindex="-1" class="menu__items menu__items--reverse menu__items--fixed menu__items--fix-width custom-items"><div role="menuitemcheckbox" data-value="1" aria-checked="true" tabindex="-1" class="menu__item"><svg class="icon icon--18 icon--unchecked" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-checkbox-unchecked-18"></use><defs><symbol viewBox="0 0 18 18" id="icon-checkbox-unchecked-18"><path d="M6.4 17h5.2c1.137 0 1.929 0 2.546-.051.605-.05.953-.142 1.216-.276a3 3 0 0 0 1.311-1.311c.134-.263.226-.611.276-1.216.05-.617.051-1.41.051-2.546V6.4c0-1.137 0-1.929-.051-2.546-.05-.605-.142-.953-.276-1.216a3 3 0 0 0-1.311-1.311c-.263-.134-.611-.226-1.216-.276C13.529 1.001 12.736 1 11.6 1H6.4c-1.137 0-1.929 0-2.546.051-.605.05-.953.142-1.216.276a3 3 0 0 0-1.311 1.311c-.134.263-.226.611-.276 1.216C1.001 4.471 1 5.264 1 6.4v5.2c0 1.137 0 1.929.051 2.546.05.605.142.953.276 1.216a3 3 0 0 0 1.311 1.311c.263.134.611.226 1.216.276.617.05 1.41.051 2.546.051ZM.436 15.816C0 14.96 0 13.84 0 11.6V6.4c0-2.24 0-3.36.436-4.216A4 4 0 0 1 2.184.436C3.04 0 4.16 0 6.4 0h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C18 3.04 18 4.16 18 6.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C14.96 18 13.84 18 11.6 18H6.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748Z"/></symbol></defs></svg><svg class="icon icon--18 icon--checked" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-checkbox-checked-18"></use><defs><symbol viewBox="0 0 18 18" id="icon-checkbox-checked-18"><path d="M0 6.4c0-2.24 0-3.36.436-4.216A4 4 0 0 1 2.184.436C3.04 0 4.16 0 6.4 0h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C18 3.04 18 4.16 18 6.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C14.96 18 13.84 18 11.6 18H6.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C0 14.96 0 13.84 0 11.6V6.4Zm14.71-2.11a1 1 0 0 0-1.41 0L7 10.59l-2.29-2.3a1.004 1.004 0 0 0-1.42 1.42l3 3a1 1 0 0 0 1.41 0l7-7a1 1 0 0 0 .01-1.42Z"/></symbol></defs></svg><span>One</span></div><div role="menuitemcheckbox" data-value="2" aria-checked="false" tabindex="-1" class="menu__item"><svg class="icon icon--18 icon--unchecked" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-checkbox-unchecked-18"></use></svg><svg class="icon icon--18 icon--checked" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><use xlink:href="#icon-checkbox-checked-18"></use></svg><span>Two</span></div></div></span>"`;
diff --git a/packages/evo-react/src/menu/test/test.browser.tsx b/packages/evo-react/src/menu/test/test.browser.tsx
new file mode 100644
index 00000000000..76eb1073376
--- /dev/null
+++ b/packages/evo-react/src/menu/test/test.browser.tsx
@@ -0,0 +1,391 @@
+import { createRef } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { EvoButton } from "../../button/button";
+import {
+  EvoMenu,
+  EvoMenuCheckboxGroup,
+  EvoMenuCheckboxItem,
+  EvoMenuFooter,
+  EvoMenuItem,
+  EvoMenuItemBadge,
+  EvoMenuItems,
+  EvoMenuRadioGroup,
+  EvoMenuRadioItem,
+  EvoMenuSeparator,
+} from "../index";
+
+describe("evo-menu", () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  afterEach(() => {
+    user.cleanup();
+  });
+
+  it("renders the compound menu structure", async () => {
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Actions">
+          <EvoMenuItem>
+            Messages
+            <EvoMenuItemBadge number={5} a11yText="5 unread messages" />
+          </EvoMenuItem>
+          <EvoMenuSeparator />
+        </EvoMenuItems>
+        <EvoMenuFooter>
+          <EvoButton>Apply</EvoButton>
+        </EvoMenuFooter>
+      </EvoMenu>,
+    );
+
+    await expect
+      .element(screen.getByRole("menu", { name: "Actions" }))
+      .toBeInTheDocument();
+    await expect.element(screen.getByRole("separator")).toBeInTheDocument();
+    await expect
+      .element(screen.getByLabelText("5 unread messages"))
+      .toBeInTheDocument();
+    await expect
+      .element(screen.getByRole("button", { name: "Apply" }))
+      .toBeInTheDocument();
+    expect(
+      screen.getByText("Messages").element().closest(".menu__item"),
+    ).not.toBeNull();
+  });
+
+  it("uses an external element as the accessible name", async () => {
+    const screen = await render(
+      <>
+        <span id="actions-label">Actions</span>
+        <EvoMenu>
+          <EvoMenuItems a11yLabelId="actions-label">
+            <EvoMenuItem>Open</EvoMenuItem>
+          </EvoMenuItems>
+        </EvoMenu>
+      </>,
+    );
+
+    await expect
+      .element(screen.getByRole("menu", { name: "Actions" }))
+      .toHaveAttribute("aria-labelledby", "actions-label");
+  });
+
+  it("moves one roving tab stop across groups and skips disabled items", async () => {
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Mixed menu">
+          <EvoMenuItem>Alpha</EvoMenuItem>
+          <EvoMenuRadioGroup defaultSelected="one">
+            <EvoMenuRadioItem value="one">Radio one</EvoMenuRadioItem>
+            <EvoMenuRadioItem value="two" disabled>
+              Radio two
+            </EvoMenuRadioItem>
+          </EvoMenuRadioGroup>
+          <EvoMenuSeparator />
+          <EvoMenuCheckboxGroup defaultSelected={[]}>
+            <EvoMenuCheckboxItem value="gamma">Gamma</EvoMenuCheckboxItem>
+          </EvoMenuCheckboxGroup>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const alpha = screen.getByRole("menuitem", { name: "Alpha" });
+    const radio = screen.getByRole("menuitemradio", { name: "Radio one" });
+    const disabledRadio = screen.getByRole("menuitemradio", {
+      name: "Radio two",
+    });
+    const checkbox = screen.getByRole("menuitemcheckbox", { name: "Gamma" });
+
+    await expect.element(alpha).toHaveAttribute("tabindex", "0");
+    await expect.element(radio).toHaveAttribute("tabindex", "-1");
+    await expect.element(disabledRadio).toHaveAttribute("tabindex", "-1");
+
+    await user.click(alpha);
+    await user.keyboard("{ArrowDown}");
+    await expect.element(radio).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}");
+    await expect.element(checkbox).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}");
+    await expect.element(alpha).toHaveFocus();
+
+    await user.keyboard("{ArrowUp}");
+    await expect.element(checkbox).toHaveFocus();
+  });
+
+  it("supports Home, End, and horizontal arrow navigation", async () => {
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Actions">
+          <EvoMenuItem>First</EvoMenuItem>
+          <EvoMenuItem>Middle</EvoMenuItem>
+          <EvoMenuItem>Last</EvoMenuItem>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const first = screen.getByRole("menuitem", { name: "First" });
+    const middle = screen.getByRole("menuitem", { name: "Middle" });
+    const last = screen.getByRole("menuitem", { name: "Last" });
+
+    await user.click(middle);
+    await user.keyboard("{End}");
+    await expect.element(last).toHaveFocus();
+
+    await user.keyboard("{Home}");
+    await expect.element(first).toHaveFocus();
+
+    await user.keyboard("{ArrowRight}");
+    await expect.element(middle).toHaveFocus();
+
+    await user.keyboard("{ArrowLeft}");
+    await expect.element(first).toHaveFocus();
+  });
+
+  it("focuses matching items with typeahead across groups", async () => {
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Countries">
+          <EvoMenuItem>Albania</EvoMenuItem>
+          <EvoMenuRadioGroup>
+            <EvoMenuRadioItem value="canada">Canada</EvoMenuRadioItem>
+          </EvoMenuRadioGroup>
+          <EvoMenuCheckboxGroup>
+            <EvoMenuCheckboxItem value="germany">Germany</EvoMenuCheckboxItem>
+          </EvoMenuCheckboxGroup>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const first = screen.getByRole("menuitem", { name: "Albania" });
+    const germany = screen.getByRole("menuitemcheckbox", { name: "Germany" });
+
+    await user.click(first);
+    await user.keyboard("ger");
+
+    await expect.element(germany).toHaveFocus();
+  });
+
+  it("treats Space as typeahead text while a search is active", async () => {
+    const onSelect = vi.fn();
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Cities">
+          <EvoMenuItem>London</EvoMenuItem>
+          <EvoMenuItem onSelect={onSelect}>New York</EvoMenuItem>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const london = screen.getByRole("menuitem", { name: "London" });
+    const newYork = screen.getByRole("menuitem", { name: "New York" });
+
+    await user.click(london);
+    await user.keyboard("new york");
+
+    await expect.element(newYork).toHaveFocus();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("resets typeahead after the configured timeout", async () => {
+    const screen = await render(
+      <EvoMenu typeaheadTimeoutLength={20}>
+        <EvoMenuItems a11yText="Countries">
+          <EvoMenuItem>Albania</EvoMenuItem>
+          <EvoMenuItem>Germany</EvoMenuItem>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const albania = screen.getByRole("menuitem", { name: "Albania" });
+    const germany = screen.getByRole("menuitem", { name: "Germany" });
+
+    await user.click(albania);
+    await user.keyboard("g");
+    await expect.element(germany).toHaveFocus();
+
+    await new Promise((resolve) => setTimeout(resolve, 30));
+    await user.keyboard("a");
+
+    await expect.element(albania).toHaveFocus();
+  });
+
+  it("uses textValue for typeahead when item content is complex", async () => {
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Actions">
+          <EvoMenuItem>First</EvoMenuItem>
+          <EvoMenuItem textValue="Messages">
+            Inbox
+            <EvoMenuItemBadge number={5} a11yText="5 unread messages" />
+          </EvoMenuItem>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const first = screen.getByRole("menuitem", { name: "First" });
+    const messages = screen.getByRole("menuitem", {
+      name: "Inbox 5 unread messages",
+    });
+
+    await user.click(first);
+    await user.keyboard("mes");
+
+    await expect.element(messages).toHaveFocus();
+  });
+
+  it("selects an uncontrolled radio item by click and keyboard", async () => {
+    const onSelectedChange = vi.fn();
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Sort">
+          <EvoMenuRadioGroup
+            defaultSelected="price"
+            onSelectedChange={onSelectedChange}
+          >
+            <EvoMenuRadioItem value="price">Price</EvoMenuRadioItem>
+            <EvoMenuRadioItem value="distance">Distance</EvoMenuRadioItem>
+          </EvoMenuRadioGroup>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const price = screen.getByRole("menuitemradio", { name: "Price" });
+    const distance = screen.getByRole("menuitemradio", { name: "Distance" });
+
+    await expect.element(price).toHaveAttribute("aria-checked", "true");
+    await user.click(distance);
+    await expect.element(price).toHaveAttribute("aria-checked", "false");
+    await expect.element(distance).toHaveAttribute("aria-checked", "true");
+    expect(onSelectedChange).toHaveBeenLastCalledWith("distance");
+
+    await user.keyboard("{Home}");
+    await user.keyboard(" ");
+    await expect.element(price).toHaveAttribute("aria-checked", "true");
+    expect(onSelectedChange).toHaveBeenLastCalledWith("price");
+  });
+
+  it("reports controlled radio changes without updating controlled state", async () => {
+    const onSelectedChange = vi.fn();
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Sort">
+          <EvoMenuRadioGroup
+            selected="price"
+            onSelectedChange={onSelectedChange}
+          >
+            <EvoMenuRadioItem value="price">Price</EvoMenuRadioItem>
+            <EvoMenuRadioItem value="distance">Distance</EvoMenuRadioItem>
+          </EvoMenuRadioGroup>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const price = screen.getByRole("menuitemradio", { name: "Price" });
+    const distance = screen.getByRole("menuitemradio", { name: "Distance" });
+
+    await user.click(distance);
+
+    expect(onSelectedChange).toHaveBeenCalledWith("distance");
+    await expect.element(price).toHaveAttribute("aria-checked", "true");
+    await expect.element(distance).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("toggles uncontrolled checkbox values", async () => {
+    const onSelectedChange = vi.fn();
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Filters">
+          <EvoMenuCheckboxGroup
+            defaultSelected={["shipping"]}
+            onSelectedChange={onSelectedChange}
+          >
+            <EvoMenuCheckboxItem value="shipping">Shipping</EvoMenuCheckboxItem>
+            <EvoMenuCheckboxItem value="returns">Returns</EvoMenuCheckboxItem>
+          </EvoMenuCheckboxGroup>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const shipping = screen.getByRole("menuitemcheckbox", {
+      name: "Shipping",
+    });
+    const returns = screen.getByRole("menuitemcheckbox", { name: "Returns" });
+
+    await user.click(returns);
+    await expect.element(returns).toHaveAttribute("aria-checked", "true");
+    expect(onSelectedChange).toHaveBeenLastCalledWith(["shipping", "returns"]);
+
+    await user.keyboard("{Home}");
+    await user.keyboard("{Enter}");
+    await expect.element(shipping).toHaveAttribute("aria-checked", "false");
+    expect(onSelectedChange).toHaveBeenLastCalledWith(["returns"]);
+  });
+
+  it("does not activate disabled items", async () => {
+    const onClick = vi.fn();
+    const onSelect = vi.fn();
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Actions">
+          <EvoMenuItem disabled onClick={onClick} onSelect={onSelect}>
+            Disabled
+          </EvoMenuItem>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const item = screen.getByRole("menuitem", { name: "Disabled" });
+    await item.click({ force: true });
+    item
+      .element()
+      .dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+      );
+
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("activates command items with Enter and Space", async () => {
+    const onSelect = vi.fn();
+    const screen = await render(
+      <EvoMenu>
+        <EvoMenuItems a11yText="Actions">
+          <EvoMenuItem onSelect={onSelect}>Open</EvoMenuItem>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    const item = screen.getByRole("menuitem", { name: "Open" });
+    await user.click(item);
+    onSelect.mockClear();
+
+    await user.keyboard("{Enter}");
+    await user.keyboard(" ");
+
+    expect(onSelect).toHaveBeenCalledTimes(2);
+  });
+
+  it("forwards refs to the root and menu elements", async () => {
+    const rootRef = createRef<HTMLSpanElement>();
+    const itemsRef = createRef<HTMLDivElement>();
+
+    await render(
+      <EvoMenu ref={rootRef}>
+        <EvoMenuItems ref={itemsRef} a11yText="Actions">
+          <EvoMenuItem>Open</EvoMenuItem>
+        </EvoMenuItems>
+      </EvoMenu>,
+    );
+
+    expect(rootRef.current).toBeInstanceOf(HTMLSpanElement);
+    expect(itemsRef.current).toBeInstanceOf(HTMLDivElement);
+  });
+});
diff --git a/packages/evo-react/src/menu/test/test.server.tsx b/packages/evo-react/src/menu/test/test.server.tsx
new file mode 100644
index 00000000000..7e41a379b7f
--- /dev/null
+++ b/packages/evo-react/src/menu/test/test.server.tsx
@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+import { renderToString } from "react-dom/server";
+import { EvoButton } from "../../button/button";
+import {
+  EvoMenu,
+  EvoMenuCheckboxGroup,
+  EvoMenuCheckboxItem,
+  EvoMenuFooter,
+  EvoMenuItem,
+  EvoMenuItemBadge,
+  EvoMenuItems,
+  EvoMenuRadioGroup,
+  EvoMenuRadioItem,
+  EvoMenuSeparator,
+} from "../index";
+
+describe("EvoMenu SSR", () => {
+  it("renders command items, a badge, a separator, and a footer", () => {
+    expect(
+      renderToString(
+        <EvoMenu>
+          <EvoMenuItems a11yText="Actions">
+            <EvoMenuItem>
+              Messages
+              <EvoMenuItemBadge number={5} a11yText="5 unread messages" />
+            </EvoMenuItem>
+            <EvoMenuSeparator />
+            <EvoMenuItem disabled>Disabled</EvoMenuItem>
+          </EvoMenuItems>
+          <EvoMenuFooter>
+            <EvoButton>Apply</EvoButton>
+          </EvoMenuFooter>
+        </EvoMenu>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("renders selected radio and checkbox items", () => {
+    expect(
+      renderToString(
+        <EvoMenu>
+          <EvoMenuItems a11yText="Preferences">
+            <EvoMenuRadioGroup selected="price">
+              <EvoMenuRadioItem value="price">Price</EvoMenuRadioItem>
+              <EvoMenuRadioItem value="distance">Distance</EvoMenuRadioItem>
+            </EvoMenuRadioGroup>
+            <EvoMenuCheckboxGroup selected={["shipping"]}>
+              <EvoMenuCheckboxItem value="shipping">
+                Shipping
+              </EvoMenuCheckboxItem>
+              <EvoMenuCheckboxItem value="returns">Returns</EvoMenuCheckboxItem>
+            </EvoMenuCheckboxGroup>
+          </EvoMenuItems>
+        </EvoMenu>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("renders the filter variant and custom classes", () => {
+    expect(
+      renderToString(
+        <EvoMenu
+          variant="filter"
+          reverse
+          fixed
+          fixWidth
+          className="custom-menu"
+        >
+          <EvoMenuItems className="custom-items" a11yText="Filters">
+            <EvoMenuCheckboxGroup defaultSelected={[1]}>
+              <EvoMenuCheckboxItem value={1}>One</EvoMenuCheckboxItem>
+              <EvoMenuCheckboxItem value={2}>Two</EvoMenuCheckboxItem>
+            </EvoMenuCheckboxGroup>
+          </EvoMenuItems>
+        </EvoMenu>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("applies prefixed menu classes", () => {
+    expect(
+      renderToString(
+        <EvoMenu classPrefix="menu-button" reverse fixed fixWidth>
+          <EvoMenuItems a11yText="Actions">
+            <EvoMenuItem>Open</EvoMenuItem>
+          </EvoMenuItems>
+        </EvoMenu>,
+      ),
+    ).toMatchSnapshot();
+  });
+});
diff --git a/packages/evo-react/src/menu/types.ts b/packages/evo-react/src/menu/types.ts
new file mode 100644
index 00000000000..f8ac807bf11
--- /dev/null
+++ b/packages/evo-react/src/menu/types.ts
@@ -0,0 +1,128 @@
+import type {
+  ComponentProps,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from "react";
+import type { EvoBadgeProps } from "../badge/types";
+
+export type MenuValue = string | number;
+export type EvoMenuVariant = "filter" | "none";
+export type EvoMenuItemSelectEvent =
+  | MouseEvent<HTMLDivElement>
+  | KeyboardEvent<HTMLDivElement>;
+
+export type EvoMenuProps = ComponentProps<"span"> & {
+  /** Changes the menu presentation. The filter variant displays selection controls. */
+  variant?: EvoMenuVariant;
+  /** Prefix applied to the menu BEM classes when embedded in another component. */
+  classPrefix?: string;
+  /** Aligns the menu to the opposite inline edge. */
+  reverse?: boolean;
+  /** Uses fixed positioning instead of absolute positioning. */
+  fixed?: boolean;
+  /** Makes the menu width match its containing control. */
+  fixWidth?: boolean;
+  /** Time in milliseconds before the typeahead search buffer resets. */
+  typeaheadTimeoutLength?: number;
+};
+
+type MenuItemsA11yProps =
+  | {
+      /** Localized accessible name for the menu. */
+      a11yText?: string;
+      /** Cannot be used with `a11yText`. */
+      a11yLabelId?: never;
+    }
+  | {
+      /** Cannot be used with `a11yLabelId`. */
+      a11yText?: never;
+      /** ID of the element that labels the menu. */
+      a11yLabelId?: string;
+    };
+
+export type EvoMenuItemsProps = Omit<
+  ComponentProps<"div">,
+  "aria-label" | "aria-labelledby" | "role" | "tabIndex"
+> &
+  MenuItemsA11yProps;
+
+export type EvoMenuItemProps = Omit<
+  ComponentProps<"div">,
+  "aria-checked" | "aria-disabled" | "onSelect" | "role" | "tabIndex"
+> & {
+  /** Prevents activation and removes the item from keyboard navigation. */
+  disabled?: boolean;
+  /** Text used for typeahead. Defaults to the rendered text content. */
+  textValue?: string;
+  /** Triggered when the item is activated by click, Enter, or Space. */
+  onSelect?: (event: EvoMenuItemSelectEvent) => void;
+};
+
+export type EvoMenuRadioItemProps<Value extends MenuValue = MenuValue> =
+  EvoMenuItemProps & {
+    /** Selection value managed by the nearest EvoMenuRadioGroup. */
+    value: Value;
+  };
+
+export type EvoMenuCheckboxItemProps<Value extends MenuValue = MenuValue> =
+  EvoMenuItemProps & {
+    /** Selection value managed by the nearest EvoMenuCheckboxGroup. */
+    value: Value;
+  };
+
+type MenuGroupProps = {
+  children?: ReactNode;
+};
+
+type ControlledRadioGroupProps<Value extends MenuValue> = {
+  /** Controlled selected value. Pass null when no item is selected. */
+  selected: Value | null;
+  /** Unavailable when selected controls the group. */
+  defaultSelected?: never;
+  /** Triggered when the selected value changes. */
+  onSelectedChange?: (selected: Value) => void;
+};
+
+type UncontrolledRadioGroupProps<Value extends MenuValue> = {
+  /** Unavailable when defaultSelected initializes an uncontrolled group. */
+  selected?: never;
+  /** Initial selected value for an uncontrolled group. Pass null or omit when no item is selected. */
+  defaultSelected?: Value | null;
+  /** Triggered when the selected value changes. */
+  onSelectedChange?: (selected: Value) => void;
+};
+
+export type EvoMenuRadioGroupProps<Value extends MenuValue = MenuValue> =
+  MenuGroupProps &
+    (ControlledRadioGroupProps<Value> | UncontrolledRadioGroupProps<Value>);
+
+type ControlledCheckboxGroupProps<Value extends MenuValue> = {
+  /** Controlled selected values. */
+  selected: readonly Value[];
+  /** Unavailable when selected controls the group. */
+  defaultSelected?: never;
+  /** Triggered when the selected values change. */
+  onSelectedChange?: (selected: Value[]) => void;
+};
+
+type UncontrolledCheckboxGroupProps<Value extends MenuValue> = {
+  /** Unavailable when defaultSelected initializes an uncontrolled group. */
+  selected?: never;
+  /** Initial selected values for an uncontrolled group. */
+  defaultSelected?: readonly Value[];
+  /** Triggered when the selected values change. */
+  onSelectedChange?: (selected: Value[]) => void;
+};
+
+export type EvoMenuCheckboxGroupProps<Value extends MenuValue = MenuValue> =
+  MenuGroupProps &
+    (
+      | ControlledCheckboxGroupProps<Value>
+      | UncontrolledCheckboxGroupProps<Value>
+    );
+
+export type EvoMenuSeparatorProps = Omit<ComponentProps<"hr">, "role">;
+export type EvoMenuFooterProps = ComponentProps<"div">;
+
+export type EvoMenuItemBadgeProps = Omit<EvoBadgeProps, "type">;
diff --git a/packages/evo-react/src/utils/use-roving-tab-index.ts b/packages/evo-react/src/utils/use-roving-tab-index.ts
index 31054d0cfca..bbfd8779681 100644
--- a/packages/evo-react/src/utils/use-roving-tab-index.ts
+++ b/packages/evo-react/src/utils/use-roving-tab-index.ts
@@ -119,20 +119,21 @@ export function useRovingTabIndex<Key>({
 
   const registerItem = useCallback(
     (item: RovingTabIndexItem<Key>) => {
-      itemsRef.current.set(item.key, item);
+      const key = item.key;
+      itemsRef.current.set(key, item);
 
       if (focusedKeyRef.current === null && !item.disabled) {
-        setFocusedKey(item.key);
+        setFocusedKey(key);
       }
 
       return () => {
-        if (itemsRef.current.get(item.key) !== item) {
+        if (itemsRef.current.get(key) !== item) {
           return;
         }
 
-        itemsRef.current.delete(item.key);
-        if (focusedKeyRef.current === item.key) {
-          const fallbackKey = findFallbackKey(item.key);
+        itemsRef.current.delete(key);
+        if (focusedKeyRef.current === key) {
+          const fallbackKey = findFallbackKey(key);
           focusedKeyRef.current = fallbackKey;
           setFocusedKeyState(fallbackKey);
         }
diff --git a/packages/evo-react/src/utils/use-typeahead.ts b/packages/evo-react/src/utils/use-typeahead.ts
new file mode 100644
index 00000000000..c5a25d99491
--- /dev/null
+++ b/packages/evo-react/src/utils/use-typeahead.ts
@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import type { KeyboardEventHandler } from "react";
+import type { RovingTabIndexItem } from "./use-roving-tab-index";
+
+const DEFAULT_TIMEOUT_LENGTH = 2000;
+
+type UseTypeaheadOptions<Key> = {
+  getItems: () => readonly RovingTabIndexItem<Key>[];
+  focusedKey: Key | null;
+  onMatch: (key: Key) => void;
+  timeoutLength?: number;
+};
+
+type TypeaheadProps = {
+  onKeyDownCapture: KeyboardEventHandler<HTMLElement>;
+  onKeyDown: KeyboardEventHandler<HTMLElement>;
+};
+
+function getSearchCharacter(key: string) {
+  return key.length === 1 || !/^[A-Z]/i.test(key) ? key : "";
+}
+
+export function useTypeahead<Key>({
+  getItems,
+  focusedKey,
+  onMatch,
+  timeoutLength = DEFAULT_TIMEOUT_LENGTH,
+}: UseTypeaheadOptions<Key>): { typeaheadProps: TypeaheadProps } {
+  const searchRef = useRef("");
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
+  const collator = useMemo(
+    () =>
+      new Intl.Collator(undefined, { usage: "search", sensitivity: "base" }),
+    [],
+  );
+
+  const clearSearch = useCallback(() => {
+    searchRef.current = "";
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = undefined;
+  }, []);
+
+  const scheduleClear = useCallback(() => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(clearSearch, timeoutLength);
+  }, [clearSearch, timeoutLength]);
+
+  const findMatch = useCallback(
+    (search: string) => {
+      const items = getItems().filter(
+        ({ disabled, ref }) => !disabled && ref.current,
+      );
+      if (items.length === 0) {
+        return undefined;
+      }
+
+      const focusedIndex = items.findIndex(({ key }) => key === focusedKey);
+      const searchOrder =
+        focusedIndex === -1
+          ? items
+          : [
+              ...items.slice(focusedIndex + 1),
+              ...items.slice(0, focusedIndex + 1),
+            ];
+
+      return searchOrder.find(({ ref, textValue }) => {
+        const itemText = (textValue ?? ref.current?.textContent ?? "").trim();
+        return (
+          itemText.length > 0 &&
+          collator.compare(itemText.slice(0, search.length), search) === 0
+        );
+      });
+    },
+    [collator, focusedKey, getItems],
+  );
+
+  const search = useCallback(
+    (character: string) => {
+      searchRef.current += character;
+      const match = findMatch(searchRef.current);
+
+      if (!match) {
+        clearSearch();
+        return false;
+      }
+
+      onMatch(match.key);
+      scheduleClear();
+      return true;
+    },
+    [clearSearch, findMatch, onMatch, scheduleClear],
+  );
+
+  const onKeyDownCapture = useCallback<KeyboardEventHandler<HTMLElement>>(
+    (event) => {
+      if (
+        searchRef.current.length === 0 ||
+        event.key !== " " ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.altKey
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      search(" ");
+    },
+    [search],
+  );
+
+  const onKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(
+    (event) => {
+      const character = getSearchCharacter(event.key);
+      if (
+        !character ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.altKey ||
+        (searchRef.current.length === 0 && character === " ")
+      ) {
+        return;
+      }
+
+      if (search(character)) {
+        event.preventDefault();
+      }
+    },
+    [search],
+  );
+
+  useEffect(() => clearSearch, [clearSearch]);
+
+  return {
+    typeaheadProps: {
+      onKeyDownCapture,
+      onKeyDown,
+    },
+  };
+}
diff --git a/packages/skin/.prettierignore b/packages/skin/.prettierignore
index 3b280881117..31b106ba8a7 100644
--- a/packages/skin/.prettierignore
+++ b/packages/skin/.prettierignore
@@ -1,3 +1,4 @@
+CHANGELOG.md
 _cdn
 _site
 docs/.jekyll-metadata
diff --git a/packages/skin/dist/menu/menu.css b/packages/skin/dist/menu/menu.css
index 0a11701e967..b05185a4a27 100644
--- a/packages/skin/dist/menu/menu.css
+++ b/packages/skin/dist/menu/menu.css
@@ -188,13 +188,15 @@ div.menu__item[role^="menuitem"] > span {
 
 a.fake-menu__item--badged,
 button.fake-menu__item--badged,
-div.menu__item--badged[role^="menuitem"] {
+div.menu__item--badged[role^="menuitem"],
+div.menu__item[role^="menuitem"]:has(.badge) {
     position: relative;
 }
 
 a.fake-menu__item--badged span.badge,
 button.fake-menu__item--badged span.badge,
-div.menu__item--badged[role^="menuitem"] span.badge {
+div.menu__item--badged[role^="menuitem"] span.badge,
+div.menu__item[role^="menuitem"] span.badge {
     padding: 1px 5px;
     position: absolute;
     top: 0;
diff --git a/packages/skin/src/sass/menu/menu.scss b/packages/skin/src/sass/menu/menu.scss
index ee2b3f54002..5aac46e3f70 100644
--- a/packages/skin/src/sass/menu/menu.scss
+++ b/packages/skin/src/sass/menu/menu.scss
@@ -96,13 +96,15 @@ div.menu__item[role^="menuitem"] > span {
 
 a.fake-menu__item--badged,
 button.fake-menu__item--badged,
-div.menu__item--badged[role^="menuitem"] {
+div.menu__item--badged[role^="menuitem"],
+div.menu__item[role^="menuitem"]:has(.badge) {
     position: relative;
 }
 
 a.fake-menu__item--badged span.badge,
 button.fake-menu__item--badged span.badge,
-div.menu__item--badged[role^="menuitem"] span.badge {
+div.menu__item--badged[role^="menuitem"] span.badge,
+div.menu__item[role^="menuitem"] span.badge {
     padding: 1px 5px;
     position: absolute;
     top: 0;
diff --git a/packages/skin/src/sass/menu/stories/misc.stories.js b/packages/skin/src/sass/menu/stories/misc.stories.js
index 435c0f18f79..37ff9f7b8d3 100644
--- a/packages/skin/src/sass/menu/stories/misc.stories.js
+++ b/packages/skin/src/sass/menu/stories/misc.stories.js
@@ -13,9 +13,9 @@ export const stateless = () => `
 export const badged = () => `
 <span class="menu">
     <span class="menu__items" role="menu">
-        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 1<span class="badge">1</span></span></div>
-        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 2<span class="badge">10</span></span></div>
-        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 3<span class="badge">99+</span></span></div>
+        <div class="menu__item" role="menuitem"><span>Button 1<span class="badge">1</span></span></div>
+        <div class="menu__item" role="menuitem"><span>Button 2<span class="badge">10</span></span></div>
+        <div class="menu__item" role="menuitem"><span>Button 3<span class="badge">99+</span></span></div>
     </span>
 </span>
 `;
@@ -34,9 +34,9 @@ export const separator = () => `
 export const textSpacing = () => `
 <span class="menu demo-a11y-text-spacing">
     <span class="menu__items" role="menu">
-        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 1<span class="badge">1</span></span></div>
-        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 2<span class="badge">10</span></span></div>
-        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 3<span class="badge">99+</span></span></div>
+        <div class="menu__item" role="menuitem"><span>Button 1<span class="badge">1</span></span></div>
+        <div class="menu__item" role="menuitem"><span>Button 2<span class="badge">10</span></span></div>
+        <div class="menu__item" role="menuitem"><span>Button 3<span class="badge">99+</span></span></div>
     </span>
 </span>
 `;