Custom placements for popovers & menus

[d8vjork]

As I see this package is relying on PopperJS for all the placements, can we have a prop on these components to customise their placement?

[paustint]

I had an easy enough time following the docs on how to do this, at least with the popover:
https://headlessui.dev/react/popover#positioning-the-panel

[d8vjork]

That's on React, but I can't see the same for Vue

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

We are not relying on it, we are using it in the examples. You can use any library for it if you want.
Since we are not relying on it, it doesn't really make sense to provide a prop for it.

Here is an example on how you can use Popper with the Vue version of Headless UI: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/examples/src/components/menu/menu-with-popper.vue

[d8vjork]

Lovely! That's exactly what I wanted, either this implements it or not

Now I see clear the purpose of being a "vanilla UI" package

[josepmartins]

The link is broken after the last changes where the playground and the examples got removed. Here's the one in case someone needs it.

https://github.com/tailwindlabs/headlessui/blob/259965546beafa633f13973f05c2704f08ace620/packages/%40headlessui-vue/examples/src/components/menu/menu-with-popper.vue

[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 😊

[whitespacecode]

The fact we need another package to handle floating the menu or popover container to a position different than at the bottom...
Also for Vue it took me way to long to find this since there is no word about it on the documentation (only does for react)
@ycs77 Thank you for the package, just what i'm looking for. This should be added into the docs or just directly into headlessui itself.

[corysimmons]

@ycs77 Amazing library! The HeadlessUI Team should adopt it for their Popover component. 😍 Thank you!

[sebastiaanluca]

Had some issues with HeadlessUI and the Popper example in combination with Inertia. When navigating back and forth or performing actions that had preserve-scroll set to true, the menu items would appear exponentially further down the page away from the component. Headless UI Float fixed that 🤟 Code is simpler too.