Other Options #

Show/hide #

Since the control of the display is in the Headless UI component, it can usually be used directly without any setting.

But if we need to control the display of the floating element (<Menu.Items>) manually, we need to set the show prop. Then set static on the component of the floating element to make it static, so that we can manually control the display state:

const [show, setShow] = useState(false)
const toggle = () => {
  setShow(!show)
}

<Menu>
  <Float show={show}>
    <Menu.Button onClick={toggle}>
      Options
    </Menu.Button>

    <Menu.Items static>
      ...
    </Menu.Items>
  </Float>
</Menu>

HTML elements can also be used directly by setting show to control the display of floating elements (<div>):

const [show, setShow] = useState(false)
const toggle = () => {
  setShow(!show)
}

<Float show={show}>
  <button onClick={toggle}>
    Options
  </button>

  <div>
    ...
  </div>
</Float>

z-index #

CSS z-index property for the floating element, the default value is 9999, and other numbers can be set:

<Float zIndex={100}>

Position mode #

The default is to use CSS transform to position floating elements. If this causes a conflict in transform properties, can set false to use top / left for positioning:

<Float transform={false}>