Layout / The visual dictionary

Divider.

A thin line or subtle separator between related regions.

Also calledseparatorrule

See it in context

UI illustration

Workspace

Preferences

What it is

A thin line or subtle separator between related regions. Use it sparingly where spacing alone does not make the grouping clear.

When to use it

Use it between menu groups, list sections, or split panes.

Know the difference

A divider visually separates; a resizable pane divider also acts as an interactive handle.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Web separators can use an hr element; native separators often follow platform-specific insets and contrast.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a divider. Use it sparingly where spacing alone does not make the grouping clear. Use it between menu groups, list sections, or split panes. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Go to the source

You might also mean…

Gutter

Resizable pane

Container