---
navigationLabel: Arrow
order: 3
---

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

# Arrow

The `arrow` modifier positions an inner element of the popper so it appears
centered relative to the reference element, usually the triangle or caret that
points toward the reference element.

<x-ad />

## Demo

<ArrowDemo />

## Phase

`main`

## Options

```flow
type Options = {
  element: HTMLElement | string, // "[data-popper-arrow]"
  padding: Padding, // 0
};
```

### `element`

Specifies the element to position as the arrow. This element must be a child of
the popper element.

A string represents a `CSS` selector queried within the context of the popper
element.

Popper will automatically pick up the following element (using the
`data-popper-arrow` attribute) and position it:

```html
<div id="popper">
  <div data-popper-arrow></div>
</div>
```

Or you can pass an element without an attribute:

```js
const arrow = document.querySelector('#arrow');
createPopper(reference, popper, {
  modifiers: [
    {
      name: 'arrow',
      options: {
        element: arrow,
      },
    },
  ],
});
```

### `padding`

If you don't want the arrow to reach the _very_ edge of the popper (this is
common if your popper has rounded corners using `border-radius`), you can apply
some padding to it.

You can pass a `number`, which will be equal padding on all four sides, or an
`object` containing side properties each with their own padding value.

```js
createPopper(reference, popper, {
  modifiers: [
    {
      name: 'arrow',
      options: {
        padding: 5, // 5px from the edges of the popper
      },
    },
  ],
});
```

## Data

```flow
type Data = {
  x?: number,
  y?: number,
};
```
