Navigation

Separator

A thin divider between content.

stableNo JS requiredBuilt on <hr>hydrateless/separator.css

A thin divider between content. Use a native <hr> for horizontal rules, or a role="separator" element for vertical ones. CSS-only.

Separator

Live

Above

---

Below

Edit

Delete

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Divider direction.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-border	Divider color.

Accessibility

• A native <hr> already has separator semantics.
• For vertical dividers, set role="separator" and aria-orientation="vertical".

Related

Skip LinkA "skip to content" link revealed on keyboard focus.