Skip to content
On this page

Quick Start


This package is require React, React DOM and Headless UI React, you must be installed them first.

# npm
npm i @headlessui-float/react
# yarn
yarn add @headlessui-float/react

Online Demo


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

import { Float } from '@headlessui-float/react'

Then wrap <Float> around <Menu.Button> and <Menu.Items>:

+ <Float>
    <Menu.Button className="...">

    <Menu.Items className="...">
+ </Float>

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.

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 <Menu.Items>, and add the placement="bottom-end" attribute:

  <Float placement="bottom-end">

Remove the mt-2 class from <Menu.Items>, and add the offset={4} attribute:

  <Float placement="bottom-end" offset={4}>

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

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.

Quick Start has loaded