Separator

Default

Account

Billing

<div class="flex flex-col gap-4">
	<p>Account</p>
	{ui separator /}
	<p>Billing</p>
</div>

A horizontal separator is an <hr>, so it already means a change of topic to a screen reader. It has no margin, so the layout around it sets the space, here with gap-4. A bare <hr> in running text keeps its own spacing from the classless styles.

Vertical

Blog

Docs

Source

<div class="flex items-center gap-4 text-sm">
	<span>Blog</span>
	{ui separator, orientation: 'vertical' /}
	<span>Docs</span>
	{ui separator, orientation: 'vertical' /}
	<span>Source</span>
</div>

A vertical separator stretches to the height of the row it sits in, and is at least 1rem tall. It is a div with role="separator" and aria-orientation="vertical".

Param	Default	Description
orientation	'horizontal'	horizontal or vertical
class	''	added to separator
attrs	[]	any other attributes, e.g. ['id' => 'divider']

Params