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.

[markjaniczak]

An old thread but I'd also like this.

There are times where I want the functionality of the menu component but I don't want it rendered within a popover adjacent to the trigger. Two examples:

• A responsive menu; on mobile I would want the menu to render in a dialog in the form of a drawer expanding from the bottom of the screen to provide a more native experience. Keyboard interactions provided by the menu component are still needed even on mobile to be truly accessible
• A trigger button within an anchoring element. For example, Notion's form builder displays a trigger button within each question but the dropdown menu is instead aligned with the card:

While it is possible to use the popover anchor to achieve this kind of positioning, we don't have a separate menu component to place inside of that popover.

Some possible solutions:

• Extract the menu list functionality out to its own primitive so that it can be composed with other components
• Add a DropdownMenu.Anchor component similar to Popover.Anchor
• Expose more options from the floating UI package