Overview of the Phoenix and LiveView Headless Separator Component

The Mishka Chelekom Headless Separator ships zero opinionated styling - only the semantic markup and the correct ARIA wiring. It renders a single div with role="separator" (or role="none" when purely decorative) and an aria-orientation attribute, plus a data-orientation attribute for styling. Pass an inner block to render an optional centered label. Style it entirely with your own Tailwind classes on the root.

Base UI Separator example (Phoenix headless)

<div class="flex gap-4 text-nowrap">
  <a href="#" class="text-sm text-neutral-950 dark:text-white">Home</a>
  <a href="#" class="text-sm text-neutral-950 dark:text-white">Pricing</a>
  <a href="#" class="text-sm text-neutral-950 dark:text-white">Blog</a>
  <a href="#" class="text-sm text-neutral-950 dark:text-white">Support</a>

  <.separator
    id="baseui-separator-hero"
    orientation="vertical"
    class="w-px bg-neutral-300 dark:bg-neutral-700"
  />

  <a href="#" class="text-sm text-neutral-950 dark:text-white">Log in</a>
  <a href="#" class="text-sm text-neutral-950 dark:text-white">Sign up</a>
</div>

Parts & data attributes

The root carries a stable chelekom-separator class you can target, plus the current orientation as a data attribute.

Accessibility

Follows the WAI-ARIA Separator role : the root exposes role="separator" with an aria-orientation matching the visual axis. Set decorative to switch to role="none" for purely visual dividers that should be hidden from assistive technology.