Skip to main content

Separator

Displays a horizontal or vertical line to separate content.

Melt UI

Flavors for everyone

Caramel

Vanilla

Napolitan

Features

  • Supports horizontal and vertical orientation
  • Supports decorative and non-decorative separators

Anatomy

  • Root: The separator element

API Reference

createSeparator

The builder function used to create the separator component.

Props

Prop Default Type / Description
orientation 'horizontal'
'horizontal' | 'vertical'

The orientation of the separator.
decorative false
boolean

Whether or not the separator is for purely decorative purposes. This will determine if the separator is in the accessibility tree or not.

Elements

Element Description

The builder store used to create the separator root.

Options

Option Description
orientation

The orientation of the separator.
decorative

Whether or not the separator is for purely decorative purposes. This will determine if the separator is in the accessibility tree or not.

root

The separator element.

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'
[data-melt-separator]

Present on all separator elements.

Accessibility

Adheres to the Separator WAI-ARIA role