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.

Example of divider used to seperate a content area into different parts

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 seperate actions

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

Example of horizontal divider in use to options in dropdown menu