---
navigationLabel: Offset
order: 1
---

import { OffsetDemo } from '../../../../components/Demos';

# Offset

The `offset` modifier lets you displace a popper element from its reference
element.

This can be useful if you need to apply some margin between them or if you need
to fine tune the position according to some custom logic.

<x-ad />

## Demo

### Skidding

`[10, 0]`: The popper is offset 10px along the reference.

<OffsetDemo offset={[10, 0]} />

### Distance

`[0, 10]`: The popper is offset 10px away from the reference.

<OffsetDemo offset={[0, 10]} />

## Phase

`main`

## Options

```flow
type Options = {
  offset: OffsetsFunction | [?number, ?number], // [0, 0]
};

type OffsetsFunction = ({
  popper: Rect,
  reference: Rect,
  placement: Placement,
}) => [?number, ?number];
```

### `offset`

The basic `offset` accepts an array with two numbers in the form
`[skidding, distance]`.

```js
createPopper(reference, popper, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [10, 20],
      },
    },
  ],
});
```

#### Skidding

The first number, `skidding`, displaces the popper along the reference element.

```
           POP
 |----------| <- [10, 0]
REF
```

#### Distance

The second number, `distance`, displaces the popper away from, or toward, the
reference element in the direction of its placement. A positive number displaces
it further away, while a negative number lets it overlap the reference.

```
POP
 |
 | <- [0, 10]
 |
REF
```

The option can also take a function provided with some arguments, giving you
access to the popper `placement`, and the reference and popper rects.

```js
createPopper(reference, popper, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: ({ placement, reference, popper }) => {
          if (placement === 'bottom') {
            return [0, popper.height / 2];
          } else {
            return [];
          }
        },
      },
    },
  ],
});
```

In the above example, we are applying half the popper's height as margin between
the two elements only when the popper is positioned below its reference element.
