# List Divider

[component-header:sl-list-divider]

List dividers are used to visually group list items.

```html preview
<sl-list lines='full'
  style="max-width: 400px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
>
  <sl-list-divider>Denmark</sl-list-divider>
  <sl-list-item>
    <sl-label>Department #1</sl-label>
  </sl-list-item>
  <sl-list-item>
    <sl-label>Department #2</sl-label>
  </sl-list-item>
  <sl-list-divider>
    <sl-icon name="grip-vertical"></sl-icon>
    Germany
  </sl-list-divider>
  <sl-list-item>
    <sl-label>Department #3</sl-label>
  </sl-list-item>
</sl-menu>
```

[component-metadata:sl-list-divider]