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

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

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

Implements the role and semantics of the separator WAI-ARIA APG pattern. Covered by the browser test suite and an axe-core WCAG gate in CI.

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.