Separator

<div class="space-y-1">
    <h4 class="text-sm font-medium">Navius Primitives</h4>
    <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
</div>
<NaviusSeparator class="my-4 h-px w-full bg-border" />
<div class="flex h-5 items-center gap-4 text-sm">
    <span>Blog</span>
    <NaviusSeparator Orientation="vertical" Decorative="true"
                     class="w-px bg-border data-[orientation=vertical]:h-full" />
    <span>Docs</span>
    <NaviusSeparator Orientation="vertical" Decorative="true"
                     class="w-px bg-border data-[orientation=vertical]:h-full" />
    <span>Source</span>
</div>

Features

• Supports horizontal and vertical orientations.
• Exposes data-orientation for orientation-aware styling.
• Renders role="separator" with the correct aria-orientation.
• Can be marked Decorative to drop semantics for purely visual dividers.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add separator

Anatomy

Import the part and assemble it.

@using Navius.Primitives.Components.Separator

<NaviusSeparator />

API Reference

Root

The separator. Renders a div.

Data attributes

Accessibility

Adheres to the separator WAI-ARIA design pattern.

A separator is a non-focusable static divider, so it has no keyboard interactions. The non-decorative separator carries role="separator"; a vertical separator also exposes aria-orientation="vertical" (the horizontal orientation is the ARIA default and is omitted). Set Decorative when the rule is purely visual to remove it from the accessibility tree.