[menu] Support detached triggers #3170

michaldudak · 2025-11-07T16:10:26Z

Implemented detached / multiple trigger support in Menu, similarly to #2336

It is now possible to define triggers outside of Menu.Root using the handle prop. Multiple triggers per menu with a dynamic payload are also implemented.

Detached triggers also work in Menubar menus.

Content transitions will be implemented in a follow-up PR.

Closes #3031

Preview

Breaking changes

openOnHover, delay, and closeDelay props moved from Menu.Root to Menu.Trigger.
Menus must have at least one trigger.

mui-bot · 2025-11-07T16:12:01Z

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui-components/react	🔺+12.1KB^(+3.07%)	🔺+3.39KB^(+2.70%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

netlify · 2025-11-07T16:12:47Z

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`a90cbf8`
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6915d8ada6bca500080ef66e
😎 Deploy Preview	https://deploy-preview-3170--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

pkg-pr-new · 2025-11-09T09:33:15Z

vite-css-base-ui-example

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@3170

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@3170

commit: a90cbf8

atomiks · 2025-11-11T05:21:29Z

This is also on main, but not in beta.4, perhaps it should be fixed here though:

On https://deploy-preview-3170--base-ui.netlify.app/experiments/popups/popups-in-popups, click-to-drag on the menu to a submenu item and releasing closes the dialog unexpectedly

atomiks · 2025-11-12T03:59:55Z

On https://deploy-preview-3170--base-ui.netlify.app/experiments/menu/nested-detached-triggers,

When a submenu is open, trying to hover a new menubar trigger doesn't work. (Works fine on the Menubar docs hero demo, though)
When clicking the first trigger, then hovering to the last trigger, hovering over and out of the menu, it closes unexpectedly. Afterwards, clicking a trigger causes it to close on pointerup.

packages/react/src/menu/trigger/MenuTrigger.tsx

atomiks · 2025-11-12T07:04:49Z

Tabbing out of the menu in the controlled section of the experiment skips over the other triggers
Pressing Esc instantly returns focus instead of waiting for unmount

packages/react/src/dialog/root/useDialogRoot.ts

mnajdova · 2025-11-12T09:47:44Z

packages/react/src/floating-ui-react/hooks/useFocus.ts


-  return React.useMemo(() => (enabled ? { reference } : {}), [enabled, reference]);
+  return React.useMemo(
+    () => (enabled ? { reference, trigger: reference } : {}),


What's the value of adding the trigger as key, if it's always the same as the reference value?

useInteractions returns methods like getReferenceProps and getTriggerProps that use these keys. MenuTrigger calls these methods depending on whether it's an active trigger. Previously, nothing would be returned in the getTriggerProps call.

mnajdova · 2025-11-12T09:55:41Z

docs/src/app/(private)/experiments/menu/nested-detached-triggers.tsx

+  );
+}
+
+function ReusableMenu(props: { handle: Menu.Handle<ContentKey> }) {


I really like the API, it's very clean 👌

…ggers

atomiks · 2025-11-13T01:34:26Z

In the Menubar experiment, the safe polygon logic broke on the 'Add to playlist' submenu

mnajdova · 2025-11-13T08:13:23Z

Another bug I noticed in the Menubar is that if I open a submenu, the other menus no longer open on hover. There is also a flicker if I try to reopen the same submenu, see the recording attached.

Screen.Recording.2025-11-13.at.09.11.18.mov

atomiks

Haven't been able to find regressions in regular menus - in the docs, some of the components need to be updated to use the tag format <Menu.Root> (not Menu.Root)

…ggers

michaldudak added component: menu Changes related to the menu component. type: new feature Expand the scope of the product to solve a new problem. breaking change Introduces changes that are not backward compatible. labels Nov 7, 2025

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 7, 2025

michaldudak force-pushed the menu-detached-triggers branch from 9b462ac to 916dbd9 Compare November 9, 2025 09:32

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 9, 2025

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 10, 2025

michaldudak force-pushed the menu-detached-triggers branch from 50d12bd to 4ff5a85 Compare November 10, 2025 09:20

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 10, 2025

michaldudak force-pushed the menu-detached-triggers branch from 4ff5a85 to da41ab9 Compare November 10, 2025 09:24

michaldudak added 16 commits November 11, 2025 11:05

Introduce MenuHandle and add Payload to MenuStore

5e61e25

Support detached triggers WIP

7693585

Move interaction hooks to triggers

868c657

Fix tests

126453b

Fix unstable dependencies in useInteractions

095f336

Fix perf tests

b00d6a3

Add handle to Trigger

5092add

FloatingTree: do not require context

615d28b

Set payload in MenuTrigger

ac8e5c4

Add experiment

060396d

Fix multi-level menus not closing on outside click

ea9b191

Prevent rendering errors

316cc55

Add tests

7980a74

Making detached triggers work with Toolbar and Menubar

c10ec08

Fix submenu hover

6c45078

Fix menubar triggers

6d99859

michaldudak marked this pull request as ready for review November 11, 2025 13:56

michaldudak requested review from atomiks and colmtuite as code owners November 11, 2025 13:56

atomiks reviewed Nov 12, 2025

View reviewed changes

packages/react/src/menu/trigger/MenuTrigger.tsx Show resolved Hide resolved

atomiks reviewed Nov 12, 2025

View reviewed changes

packages/react/src/menu/trigger/MenuTrigger.tsx Show resolved Hide resolved

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 12, 2025

mnajdova reviewed Nov 12, 2025

View reviewed changes

michaldudak added 4 commits November 12, 2025 12:35

Add failing Menubar tests

3036695

Split useHover into reference and floating hooks

96dccac

Merge remote-tracking branch 'upstream/master' into menu-detached-tri…

70d1eaa

…ggers

Comments in tests

a5834d3

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 12, 2025

Fix tab stop issues

9a06cb3

michaldudak added 2 commits November 13, 2025 09:57

Fix returning focus timing

65c2d25

Fix safePolygon

7969c67

michaldudak force-pushed the menu-detached-triggers branch from 303c29f to 7969c67 Compare November 13, 2025 09:31

michaldudak added 3 commits November 13, 2025 10:35

Fix JSDOM tests

853b48e

Fix focus regression in menubar

b0b2e3f

Fix shift-tabbing out of menubar

e34b1bb

michaldudak force-pushed the menu-detached-triggers branch from bc0b301 to e34b1bb Compare November 13, 2025 11:04

atomiks approved these changes Nov 13, 2025

View reviewed changes

michaldudak added 2 commits November 13, 2025 14:08

docs

e06f293

Merge remote-tracking branch 'upstream/master' into menu-detached-tri…

a90cbf8

…ggers

michaldudak merged commit d894615 into mui:master Nov 13, 2025
20 checks passed

michaldudak deleted the menu-detached-triggers branch November 13, 2025 13:17

michaldudak mentioned this pull request Nov 13, 2025

[release] 1.0.0-beta.5 #3210

Open

Uh oh!

[menu] Support detached triggers #3170

[menu] Support detached triggers #3170

Uh oh!

Conversation

michaldudak commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview

Breaking changes

Uh oh!

mui-bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

netlify bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for base-ui ready!

Uh oh!

pkg-pr-new bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

atomiks commented Nov 11, 2025

Uh oh!

atomiks commented Nov 12, 2025

Uh oh!

Uh oh!

Uh oh!

atomiks commented Nov 12, 2025

Uh oh!

Uh oh!

mnajdova Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

michaldudak Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

mnajdova Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

atomiks commented Nov 13, 2025

Uh oh!

mnajdova commented Nov 13, 2025

Uh oh!

atomiks left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

michaldudak commented Nov 7, 2025 •

edited

Loading

mui-bot commented Nov 7, 2025 •

edited

Loading

netlify bot commented Nov 7, 2025 •

edited

Loading

pkg-pr-new bot commented Nov 9, 2025 •

edited

Loading