Divider

Use cases

The Divider comes in two forms: semantic and presentational. By default, the Divider is semantic; it programmatically communicates a separation of content or functionality. However, in some cases, the semantics may be superfluous. In these cases, you should turn it into a presentational Divider.

Use case	semantic	presentational
As a horizontal rule, separating paragraphs and other flow content	✅	❌
As a separator, marking a division between options, such as in a toolbar	✅	❌
As a visual indicator marking the separation of two lists	❌	✅

Examples

Separating flow content

In the following example, from the HTML5 specification, the Divider separates topics within a section.

Presentational dividers

You may wish to make a Divider presentational by removing its semantics, i.e. by passing role="separator" and rendering it as a <div> element.

For example, your navigation may be subdivided into multiple lists which are already separated semantically. You can use a presentational Divider to visually mark where one list ends and the next begins.

Orientation

By default, the Divider appears in a horizontal orientation. Reorientate it using orientation="vertical".

Orientation semantics

Divider uses aria-orientation to convey its orientation programmatically. When the presentational Divider is used, neither the element nor its orientation is exposed to assistive technologies.

✅ Do

• Use the Divider to break up flow content.
• Use the Divider to indicate divisions between grouped content such as lists.
• Use presentational Divider in cases where the semantics are superfluous, such as at the intersection between two unordered lists.

🚫 Don’t

• Don’t use a Divider where a heading would better introduce a section of content.