Skip to content
On this page

Floating UI Options


Floating positioning placement:

<Float placement="left-start">

All 12 placement in the Floating UI can be used:

  • top
  • top-start
  • top-end
  • right
  • right-start
  • right-end
  • bottom
  • bottom-start
  • bottom-end
  • left
  • left-start
  • left-end


The type of CSS position property, absolute or fixed:

<Float strategy="fixed">


The offset (px) of the floating element from the reference element:

<Float offset={8}>

More options supported by offset, refer to Floating UI's offset documentation:


Move the reference elements back into the view:

<Float shift>

Set the offset (px) of the floating element from the view border:

<Float shift={8}>

More options supported by shift, refer to Floating UI's shift documentation:


Change to the opposite placement to keep it in view:

flip cannot be used with autoPlacement

<Float flip>

Sets the minimum padding (px) of the floating element from the view border when flip:

<Float flip={10}>

More options supported by flip, refer to Floating UI's flip documentation:


Floating elements choose the placement with more space left:

autoPlacement cannot be used with flip

<Float autoPlacement>

More options supported by autoPlacement, refer to Floating UI's autoPlacement documentation:


Automatically update floating elements when needed, the default value is true. Can be set to false to disable autoUpdate:

<Float autoUpdate={false}>

More options supported by autoUpdate, refer to Floating UI's autoUpdate documentation:


If the above basic settings do not satisfy your needs, you can add the Floating UI middleware yourself:

import { offset } from '@floating-ui/react-dom'

const middleware = [
    mainAxis: 10,
    crossAxis: 6,

<Float middleware={middleware}>

Or pass a function to get reference elements and floating elements in the parameters:

const middleware = ({ referenceEl, floatingEl }) => [
Floating UI Options has loaded