# Divider

[component-header:sl-divider]

Dividers are used to visually group components. Can be used in menu etc.

```html preview
<sl-menu
  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
>
  <sl-menu-item value="1">Option 1</sl-menu-item>
  <sl-menu-item value="2">Option 2</sl-menu-item>
  <sl-divider></sl-divider>
  <sl-menu-item value="3">Option 3</sl-menu-item>
  <sl-menu-item value="4">Option 4</sl-menu-item>
  <sl-divider></sl-divider>
  <sl-menu-item value="5">Option 5</sl-menu-item>
  <sl-menu-item value="6">Option 6</sl-menu-item>
</sl-menu>
```

```html preview
<div style="display:flex; height:2rem; align-items:center">
<sl-icon-button name="clock"></sl-icon-button>
<sl-divider direction="vertical"></sl-divider>
<sl-icon-button name="clock"></sl-icon-button>
</div>
```


```html preview
King of the North
<sl-divider label="Boundary"></sl-divider>
King of the South
</div>
```

[component-metadata:sl-divider]