Skip to Content

separator

Home Getting Started Announcer
html
<div class="flex items-center gap-4">
	<a href="/">Home</a>
	<a href="/getting-started">Getting Started</a>

	<!-- vertical separator -->
	<div
		role="separator"
		aria-orientation="vertical"
		class="bg-muted-foreground h-5 w-[1.5px]"
	></div>

	<a href="/elements/announcer">Announcer</a>
</div>

Overview

A vertical separator, use an <hr> element for a semantic horizontal separator.

ARIA

Separators can be used to visually separate elements on a page, by adding the role=separator and aria-orientation attributes to an element, it will be marked by screen readers as an non-focusable separator. Some screen readers will still identify these elements to users if the role is available.