Portal Support for Dropdown Menu

[BrianHung]

It would be nice if dropdown menus could support portals like panels.

A use-case I've ran into a dropdown menu being cut-off by an ancestor's overflow-x hidden; by moving the rendering root to the body, the overflow-x: hidden wouldn't affect the rendering of the menu.

A similar library to headless that supports this is https://www.radix-ui.com/docs/primitives/components/dropdown-menu

Edit: Digging a bit more into headlessui's codebase, there is a portal element that's used for dialogs: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/portal/portal.tsx

Using this correctly still requires a positioning library e.g. react-popover though. Radix itself uses an internal positioning component in addition to their portal: https://github.com/radix-ui/primitives/tree/main/packages/react/popper/src

[ycs77]

Hi! I create a package Headless UI Float, that can be easy to position floating Headless UI elements using Floating UI (is new version Popper.js), support Transition & Portal.

If you need to float Headless UI element can try it out 😊

[sb8244]

Just tried this out and had it working exactly like I wanted within 5 minutes! Awesome work.

[SteffeyDev]

Lib works perfectly, thanks! would still love to see this built in

[DavydenkovM]

Btw about the headless-ui Float package - there's a prop strategy="fixed" - it also could help you with cut-off dropdowns instead of Portals (it helped me with similar issue)

like

<Float strategy="fixed">
            <Popover.Button ref={setReferenceElement}>
              {children}
            </Popover.Button>

            <div class="p-4">
              ...
            </div>
</Float>

[zachblume]

Huge shoutout, <Float portal>...</Float> did the trick for this issue for me. Nicely maintained library