# Divider
[component-header:sl-divider]
Dividers are used to visually separate or group elements.
```html preview
```
```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
## Examples
### Width
Use the `--width` custom property to change the width of the divider.
```html preview
```
```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
### Color
Use the `--color` custom property to change the color of the divider.
```html preview
```
```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
### Spacing
Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements.
```html preview
Above
Below
```
```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
Above
Below
>
);
```
### Vertical
Add the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.
```html preview
First
Middle
Last
```
```jsx react
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
const App = () => (
First
Middle
Last
);
```
### Menu Dividers
Use dividers in [menus](/components/menu) to visually group menu items.
```html preview
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
```
```jsx react
import {
SlDivider,
SlMenu,
SlMenuItem
} from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
);
```
[component-metadata:sl-divider]