Separator

Visually or semantically separates content.

v1.0.0
WAI-ARIA: separator role
SSR
Zoneless
0.6 kB gzip

Ndop UI

Accessible Angular components you own.

Blog

Docs

Source

import { Component } from '@angular/core';
import { Separator } from '@/ui/separator/separator';

/** Horizontal and vertical separators between blocks of content. */
@Component({
  selector: 'example-separator-demo',
  imports: [Separator],
  template: `
    <div>
      <div class="space-y-1">
        <div class="text-sm leading-none font-medium">Ndop UI</div>
        <p class="text-muted-foreground text-sm">
          Accessible Angular components you own.
        </p>
      </div>
      <div ndSeparator class="my-4"></div>
      <div class="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <div ndSeparator orientation="vertical"></div>
        <div>Docs</div>
        <div ndSeparator orientation="vertical"></div>
        <div>Source</div>
      </div>
    </div>
  `,
})
export class SeparatorDemoExample {}

A separator divides content, horizontally or vertically. By default it is semantic, with role="separator" and aria-orientation, so assistive technology announces the division. Set decorative when the separation is only visual, for example between sections that headings already divide; it then gets role="none".

Installation

npx @ndop/cli add separator

pnpm dlx @ndop/cli add separator

yarn dlx @ndop/cli add separator

bunx @ndop/cli add separator

Install the dependencies

npm install @ndop/primitives @ndop/core

pnpm add @ndop/primitives @ndop/core

yarn add @ndop/primitives @ndop/core

bun add @ndop/primitives @ndop/core

Copy the code into your project

At the paths your ndop.json aliases point to; these use the defaults.

src/app/ui/separator/separator.ts

import { computed, Directive, input } from '@angular/core';
import { NdSeparator } from '@ndop/primitives/separator';
import { cn } from '@/lib/utils';

/**
 * Styled separator line, horizontal or vertical
 * (`@ndop/primitives/separator`).
 *
 * @example
 * ```html
 * <div ndSeparator orientation="vertical" decorative></div>
 * ```
 */
@Directive({
  selector: '[ndSeparator]',
  hostDirectives: [
    { directive: NdSeparator, inputs: ['orientation', 'decorative'] },
  ],
  host: { 'data-slot': 'separator', '[class]': 'classes()' },
})
export class Separator {
  /** Extra classes, merged last so they win. */
  readonly class = input('');

  protected readonly classes = computed(() =>
    cn(
      'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
      this.class(),
    ),
  );
}

src/app/lib/utils.ts

/**
 * Class helpers used by every styled item. They come from `@ndop/core`;
 * this file is yours, so it is the place to customize them, for example by
 * wrapping `cn` with an extended tailwind-merge configuration for your own
 * utilities.
 *
 * @packageDocumentation
 */
export { cn, variants, type ClassValue, type VariantOf } from '@ndop/core';

Update the import paths to match your project
The files import each other through the @/ui and @/lib aliases.

Usage

import { Separator } from '@/ui/separator/separator';

<div>
  <div class="space-y-1">
    <div class="text-sm leading-none font-medium">Ndop UI</div>
    <p class="text-muted-foreground text-sm">
      Accessible Angular components you own.
    </p>
  </div>
  <div ndSeparator class="my-4"></div>
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <div ndSeparator orientation="vertical"></div>
    <div>Docs</div>
    <div ndSeparator orientation="vertical"></div>
    <div>Source</div>
  </div>
</div>

Examples

Separator decorative

A decorative separator, hidden from assistive technology because the headings already divide the content.

Account

Name, email and password.

Notifications

Email and push preferences.

import { Component } from '@angular/core';
import { Separator } from '@/ui/separator/separator';

/**
 * A decorative separator, hidden from assistive technology because the
 * headings already divide the content.
 */
@Component({
  selector: 'example-separator-decorative',
  imports: [Separator],
  template: `
    <section class="max-w-sm text-sm">
      <h2 class="font-medium">Account</h2>
      <p class="text-muted-foreground">Name, email and password.</p>
      <div ndSeparator decorative class="my-4"></div>
      <h2 class="font-medium">Notifications</h2>
      <p class="text-muted-foreground">Email and push preferences.</p>
    </section>
  `,
})
export class SeparatorDecorativeExample {}

Accessibility

Implements the separator role pattern of the WAI-ARIA Authoring Practices.

Focus

The separator never receives focus and never changes focus.

Right-to-left

Nothing mirrors: orientation is the same in both directions.

API reference

Separator

[ndSeparator]role separator or none

Styled separator line, horizontal or vertical (@ndop/primitives/separator).

Manages aria-orientation.

Separator binding	Type	Default
`[class]` Extra classes, merged last so they win.	`string`	`''`
`[orientation]` Layout direction of the separator.	`'horizontal' \| 'vertical'`	`'horizontal'`
`[decorative]` Whether the separator is purely visual. Decorative separators are hidden from assistive technology.	`boolean`	`false`

Data attribute	Values
`data-slot`	`separator`
`data-orientation`	—

Agent notes

Do

Use orientation="vertical" between items in a row, inside a container with a height.
Set decorative when headings or landmarks already separate the content.

Don't

Don't use a separator to add spacing; use margin or gap.
Don't stack separators next to borders that already divide the same content.

Installation

Install the dependencies

Copy the code into your project

Update the import paths to match your project

Usage

Examples

Separator decorative

Account

Notifications

Accessibility

Focus

Right-to-left

API reference

Separator

Agent notes

Do

Don't