---
path: /docs/separator/
redirect_from:
  - /components/divider/
---

# Separator

`Separator` is a static structure that provides a visible boundary for elements. It implements the [WAI-ARIA Separator Role](https://www.w3.org/TR/wai-aria-1.1/#separator).

<carbon-ad></carbon-ad>

## Installation

```sh
npm install reakit
```

Learn more in [Get started](/docs/get-started/).

## Usage

```jsx
import { Separator } from "reakit/Separator";

function Example() {
  return <Separator orientation="horizontal" />;
}
```

## Accessibility

- `Separator` has role `separator`.

Learn more in [Accessibility](/docs/accessibility/).

## Composition

- `Separator` uses [Role](/docs/role/), and is used by [MenuSeparator](/docs/menu/) and [ToolbarSeparator](/docs/toolbar/).

Learn more in [Composition](/docs/composition/#props-hooks).

## Props

<!-- Automatically generated -->

### `Separator`

<details><summary>1 state props</summary>

> These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic.

- **`orientation`**
  <code>&#34;horizontal&#34; | &#34;vertical&#34; | undefined</code>

  Separator's orientation.

</details>