# Separator

**A separator element between groups of content, read by screen readers.**

**Reference:** [View Source](https://github.com/jramke/fluid-primitives/tree/main/Resources/Private/Primitives/Separator)

**SeparatorExamples.html**

```html
<div class="flex items-center gap-4 text-sm">
    <a href="#" class="hover:underline">Home</a>
    <a href="#" class="hover:underline">Pricing</a>
    <a href="#" class="hover:underline">Blog</a>
    <ui:separator orientation="{f:constant(name: 'Jramke\FluidPrimitives\Enum\Orientation::Vertical')}" />
    <a href="#" class="hover:underline">Log in</a>
</div>
```

## Features

- `role="separator"` with `aria-orientation`
- Horizontal or vertical
- Server-rendered only, it needs no client script
- Works with `asChild`, e.g. on an `<li>` in a list

## Anatomy

The separator is a single element, so the file named after its folder is the root (`<ui:separator>`). See [Root or the Folder Name](/docs/core-concepts/file-structure.md#content-root-or-the-folder-name).

```html
<primitives:separator />
```

## Installation

```bash
typo3 ui:add separator
```

Or copy the files manually from GitHub into your project: https://github.com/jramke/fluid-primitives/tree/main/Resources/Private/Registry/Separator

Read more about installing [Components and Primitives](/docs/core-concepts/primitives.md).

## Examples

### Separate stacked content

A separator is horizontal by default. Style it through `data-orientation="horizontal"`.

**SeparatorExamples.html**

```html
<div class="flex w-64 flex-col gap-3 text-sm">
    <p>Order summary</p>
    <ui:separator />
    <p class="text-muted-foreground">3 items, shipped in 2 days</p>
</div>

```

### Separate items in a row

Set `orientation` to `vertical` for a separator between items side by side, as in the links at the top of this page. It renders `aria-orientation="vertical"` and `data-orientation="vertical"`.

```html
<ui:separator
    orientation="{f:constant(name: 'Jramke\FluidPrimitives\Enum\Orientation::Vertical')}"
/>
```

## API Reference

### separator

The separator. Renders a `<div>` element with `data-orientation` set to `horizontal` or `vertical`.

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `orientation` | `Enum\Orientation` | No | `Horizontal` | The orientation of the separator. |
| `attributes` | `array` | No | `[]` | Additional attributes that should be rendered on the component where ui:attributes is used. |
| `asChild` | `boolean` | No | `-` | If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props. |
| `rootId` | `string` | No | `-` | The root ID of the component, used for hydration and identification. |
| `ids` | `array` | No | `[]` | The IDs of of the component parts for composition. |
| `autoMount` | `boolean` | No | `true` | Whether the client initializes the component on its own. Set it to false to mount it yourself with `mount()` |
| `class` | `string` | No | `-` | The CSS class(es) to be applied to the component. |