Menu

Also known as:

Horizontal rulesHRLinesStroke

Divider

Dividers are thin lines that group content in lists and layouts, or separate blocks of content.

Need to know

We have designs but no components for dividers.

Visuals

UI Kit

Examples

To keep in mind

Dividers separate content into clear groups. This helps people navigate the information hierarchy.

We use full-bleed dividers in lists/menus and middle dividers to group or separate content.
They inherit the background color they sit on, hence the need for an opacity (alpha).

When to use

When whitespace is not enough of a separator.
In lists, separate items to show they are individual and unrelated items when each item is long and otherwise difficult to scan.
In layouts, when background color changes (e.g. from stone to white)

When not to use

For surrounding an item, use a border.
For grouping content, use a card or table row or well.

External Links

Material design: dividers