Separator

An element that divides sections of content or groups of menu items

Demo

Content

API

Name	Type	Content
`hr`	Native element	None

Attributes

Name		Value		Description
`aria-orientation`		vertical		Displays the separator vertically. Must have a Flexbox or Grid parent (use display utility classes).

Guidelines

Where to use

Separators are useful in menus, toolbars, and written content.

Avoid using too many separators. Font size, font weight, whitespace, color contrast and other visual characteristics are usually enough to create the needed distinction between elements.

The hr element has an implicit role="separator". Do not add it. There is also no need to set aria-orientation="horizontal" since it is the default for hr.