Divider

A divider is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings.

Usage

Use a divider as a visual cue to help to convey content separations and groupings.

A divider can be used to visually separate content sections, potentially spanning the entire width of the content area.

Horizontal dividers in a dashboard

Variations

A vertical divider can be used to separate items within a horizontal list, such as a menu or toolbar.

Example of vertical divider in use to separate actions

A horizontal divider can be used to separate items within a vertical list, such as a dropdown menu.

Horizontal divider that separates options in dropdown menu