Separator overview

Headless separator is a minimal divider primitive. It gives you a stable slot selector, orientation hook, and semantic toggle without imposing extra container structure.

Imports

Import the directive anywhere you need horizontal or vertical dividers in owner-authored layouts.

import { TngSeparator } from '@tailng-ui/primitives';

Basic composition

Apply the directive to any block element that should render as a divider. Toggle [decorative] only when the separation carries meaning for assistive technology.

<section class="toolbar">
  <span>Profile</span>
  <div tngSeparator orientation="vertical"></div>
  <span>Security</span>
</section>

<div tngSeparator [decorative]="false"></div>

Accessibility baseline

• Keep decorative true for purely visual dividers.
• Set [decorative]="false" only when the separator carries structural meaning.
• Use orientation="vertical" only when the divider is visually vertical.