# Separator Documentation Visually separates content or UI elements. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page ```svelte

Bits UI

Headless UI components for Svelte.

Blog

Docs

Source

``` ## Structure ```svelte ``` ## API Reference ### Separator.Root An element used to separate content. | Property | Type | Description | Details | | --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `orientation` | `enum` - 'horizontal' \| 'vertical' | The orientation of the separator.`Default: 'horizontal'` | | | `decorative` | `boolean` | Whether the separator is decorative or not, which will determine if it is announced by screen readers.`Default: false` | | | `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | --------------------- | ----------------------------------- | --------------------------------- | ------- | | `data-orientation` | `enum` - 'horizontal' \| 'vertical' | The orientation of the separator. | | | `data-separator-root` | `''` | Present on the root element. | | [Previous Select](/docs/components/select) [Next Slider](/docs/components/slider)