Separator

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

<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.

    
            <primitives:separator />

Installation

typo3 ui:add separator

Read more about installing Components and Primitives.

Examples

Separate stacked content

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

Order summary

3 items, shipped in 2 days

<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".

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

API Reference

The following tables cover the available props of the Fluid Primitives. For a full list of available client side props and methods, see the Zag.js Machine API.

separator

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

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