Separator · HTMX UI

htmx-ui

Components for htmx, in plain HTML and CSS.

Docs

Components

Changelog

html

<div class="w-full max-w-sm">
  <div class="space-y-1">
    <p class="text-sm leading-none font-medium">htmx-ui</p>
    <p class="text-sm text-muted-foreground">Components for htmx, in plain HTML and CSS.</p>
  </div>
  <div class="separator my-4" role="separator"></div>
  <div class="flex h-5 items-center gap-4 text-sm">
    <a class="link" href="/docs">Docs</a>
    <div class="separator" role="separator" aria-orientation="vertical"></div>
    <a class="link" href="/docs/components">Components</a>
    <div class="separator" role="separator" aria-orientation="vertical"></div>
    <a class="link" href="/docs/changelog">Changelog</a>
  </div>
</div>

Markup#

A .separator is a one-pixel line in the border colour, as wide as its container. Space it with margin utilities (my-4).
role="separator" marks a real change of section for screen readers. A line that is only decoration takes role="none", so it isn't announced. An <hr class="separator"> is a separator already.
Content changes for many reasons; a separator is for a break between groups, not between every pair of items. Spacing alone is often enough.

Orientation#

aria-orientation="vertical" turns the line upright, for a separator between items in a row. It takes the height of its flex row, so the row sets it (h-5 above); outside a flex row give the separator a height of its own. A decorative vertical line, with role="none" and no aria-orientation, takes .separator-vertical instead.

Blog Docs Source

html

<div class="flex items-center gap-3 text-sm">
  <span>Blog</span>
  <span class="separator separator-vertical h-4" role="none"></span>
  <span>Docs</span>
  <span class="separator separator-vertical h-4" role="none"></span>
  <span>Source</span>
</div>

Vertical separators between items that each carry a description: a separator per gap, stretching to the tallest item.

Settings Manage preferences

Account Profile and security

Help Support and docs

html

<div class="flex items-stretch gap-4 text-sm sm:gap-6">
  <div class="flex flex-col gap-1">
    <span class="font-medium">Settings</span>
    <span class="text-xs text-muted-foreground">Manage preferences</span>
  </div>
  <div class="separator" role="separator" aria-orientation="vertical"></div>
  <div class="flex flex-col gap-1">
    <span class="font-medium">Account</span>
    <span class="text-xs text-muted-foreground">Profile and security</span>
  </div>
  <div class="separator" role="separator" aria-orientation="vertical"></div>
  <div class="flex flex-col gap-1">
    <span class="font-medium">Help</span>
    <span class="text-xs text-muted-foreground">Support and docs</span>
  </div>
</div>

Between list items#

Horizontal separators between the rows of a list. The line is decorative here (the list already groups its items), so it is hidden from screen readers.

Item 1: Value 1
Item 2: Value 2
Item 3: Value 3

html

<dl class="w-full max-w-sm text-sm">
  <div class="flex justify-between py-2">
    <dt class="text-muted-foreground">Item 1</dt>
    <dd class="font-medium">Value 1</dd>
  </div>
  <div class="separator" role="none"></div>
  <div class="flex justify-between py-2">
    <dt class="text-muted-foreground">Item 2</dt>
    <dd class="font-medium">Value 2</dd>
  </div>
  <div class="separator" role="none"></div>
  <div class="flex justify-between py-2">
    <dt class="text-muted-foreground">Item 3</dt>
    <dd class="font-medium">Value 3</dd>
  </div>
</dl>

With text#

For a line with a word in it — "Or" between two ways of signing in — use .field-separator.

Reference#

Class / attribute	Description
`.separator`	A horizontal line, as wide as its container.
`[aria-orientation="vertical"]`	On a .separator with role="separator": an upright line, as tall as its flex row.
`.separator-vertical`	An upright line without aria-orientation, for decorative separators (role="none").

Markup#

Orientation#

Between menu items#

Between list items#

With text#

Reference#