An element that divides sections of content or groups of menu items
Displays the separator vertically. Must have a Flexbox or Grid parent (use display utility classes).
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.