Skip to content


offset() displaces the floating element from its core placement along the specified axes.




import {computePosition, offset} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [offset(10)],

The value(s) passed are logical, meaning their effect on the physical result is dependent on the writing direction (e.g. RTL).


offset() should generally be placed at the beginning of your middleware array.


These are the options you can pass to offset().

interface AxesOffsets {
  mainAxis?: number;
  crossAxis?: number;
  alignmentAxis?: number | null;
type Options =
  | number
  | AxesOffsets
  | ((
      middlewareArguments: MiddlewareArguments
    ) => number | AxesOffsets);

A number represents the distance (gutter or margin) between the floating element and the reference element. This is shorthand for mainAxis.



This is an object which enables you to individually configure each axis.


default: 0

Represents the distance (gutter or margin) between the floating element and the reference element.

offset({mainAxis: 10});


default: 0

Represents the skidding between the floating element and the reference element.

offset({crossAxis: 10});


default: null

Works on the same axis as crossAxis but applies only to aligned placements and works logically. The offset is inverted for -end alignments.

This will override the crossAxis offset when set to a number.

offset({alignmentAxis: 10});


You may also pass a function which returns the previously listed values — this enables you to read the dimensions of the reference or floating elements and the current placement.

offset(({rects, placement}) =>
  placement === 'bottom'
    ? rects.floating.width
    : rects.reference.width
offset(({rects, placement}) => ({
  mainAxis: placement === 'top' ? 5 : -5,
    placement === 'right'
      ? rects.reference.width
      : rects.floating.width,

Negative values

Using the function technique above in combination with negative values enables the ability to "inset" the floating element such that it is positioned on top of the reference element in some fashion.

For instance, if you wanted to mimic something like 'center' for placement (with default placement):

offset(({rects}) => {
  return -rects.reference.height / 2 - rects.floating.height / 2;