Skip to content
On this page

Quick Start

Online demo

You can try Headless UI Float online on StackBlitz:

Installation

This package is require Vue 3 and Headless UI Vue, you must be installed them first.

bash
npm i @headlessui-float/vue
bash
yarn add @headlessui-float/vue
bash
pnpm add @headlessui-float/vue

Usage

Start by finding a Headless UI component that needs to position the element, such as the <Menu> component for this example. Import <Float> component:

html
<script setup>
import { Float } from '@headlessui-float/vue'
</script>

Then wrap <Float> around <MenuButton> and <MenuItems>:

html
<Menu>
  <Float>
    <MenuButton class="...">
      Options
    </MenuButton>

    <MenuItems class="...">
      ...
    </MenuItems>
  </Float>
</Menu>

Note that <Float> must contain 2 child elements, the first is the reference element, and the second is the floating element. It can be a Headless UI component or an HTML element.

INFO

If you want to use HTML elements, or manually control the display of Headless UI components, reference Show/hide.

Then remove the absolute, right-0 and other positioning class from <MenuItems>, and add the placement="bottom-end" attribute:

html
<Menu>
  <Float placement="bottom-end">
    ...
  </Float>
</Menu>

Remove the mt-2 class from <MenuItems>, and add the :offset="4" attribute:

html
<Menu>
  <Float placement="bottom-end" :offset="4">
    ...
  </Float>
</Menu>

Then <Menu> can automatically position the inner <MenuItems>.

In addition to <Menu>, the same can be used on <Listbox>, <Popover> or <Combobox> components, and you can use <Float> on any element that requires floating positioning.

Released under the MIT License.