On this page

Separator

A visual divider between content sections. Can be horizontal or vertical.

import { Separator } from "@ninna-ui/layout";

pnpm add @ninna-ui/layout@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Separator component.

import { Separator } from "@ninna-ui/layout";

export default function Example() {
  return (
    <div>
      <p>Content above</p>
      <Separator />
      <p>Content below</p>
    </div>
  );
}

Basic

Horizontal and vertical separators.

Live preview/ Default

Horizontal

Content above

Content below

Vertical

Left

Right

Orientation

Horizontal and vertical orientations.

Live preview/ Default

orientation="horizontal" (default)

Content above

Content below

orientation="vertical"

Left

Center

Right

Decorative

Control semantic meaning for accessibility.

Live preview/ Default

decorative=true (default)

This separator is purely visual

Screen readers will ignore it

role="none" - ignored by screen readers

decorative=false

This separator has semantic meaning

Screen readers will announce it

role="separator" - announced by screen readers

Use Cases

Common patterns using Separator.

Live preview/ Default

Menu Separator

Navigation Separator

Form Section Separator

Name

API Reference

Complete list of props.

Props

Prop	Type	Default	Description
`as`	`ElementType`	`"hr"`	Semantic HTML element to render
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the separator
`decorative`	`boolean`	`true`	If true, separator has no semantic meaning
`className`	`string`	`—`	Additional CSS classes

Accessibility

By default, Separator is decorative (role="none")
Set decorative=false for semantic separators (role="separator")
Vertical separators include aria-orientation
Use semantic separators when they represent a thematic break in content