Support Anchor For Dropdown Menu

[BrianHung]

Popover menu has an anchor element to support positioning the menu separately from the trigger: https://www.radix-ui.com/docs/primitives/components/popover#anchor

It would be useful if dropdown menus could support a similar functionality.

[benoitgrelard]

Hi @BrianHung,

We added the functionality to Popover as they are quite a bit more generic.
With menus, it's hard to see why you wouldn't want it to drop from the trigger.
That being said, we are always interested to hear about your use-case so we can consider it.
What do you have in mind here?

✌️

[BrianHung]

Building a menu close to the dropdown menu from google sheets and also on top of a canvas element.

Because its a canvas element, we only get a virtual element / viewport rectangle of the column header. As a workaround, I am using that header rectangle to position the menu trigger element and the menu content element.

However, the header rectangle changes on hover similar to google sheets: notice how the dropdown arrow moves to E while the content stays on F.

Right now, I can achieve that behavior with popovers with anchor staying on column F and trigger moving to column E. But popovers lack support for nested menus and arrowkey item selection.

[prtcl]

I know this is an old thread but I've come across this issue while working on a component. In my case, the trigger is a Touchable-like component which supports press and long press actions. For a regular press/tap I would like to trigger an action which opens a modal. For long press, I'm opening a controlled dropdown with a few options in the menu. It's not possible for me to asChild my custom trigger as there's collisions between which props Radix expects to spread on the button vs what's already being overridden to create the long press action. It looks like I should use a popover instead in my case, just wanted to report in on possible use cases for the anchor prop.