Separator

Overview

Separator renders NaviusSeparator, the headless primitive that owns the role and aria-orientation semantics, and layers a shrink-0 bg-border class plus an orientation-driven sizing class (h-px w-full horizontal, h-full w-px vertical) on top.

Install

navius add separator --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<div>
    <p class="text-sm font-medium">zits/ui</p>
    <ZitsSeparator class="my-4" />
    <div class="flex h-5 items-center gap-3 text-sm">
        <span>Docs</span>
        <ZitsSeparator Orientation="vertical" />
        <span>Components</span>
    </div>
</div>

Parts and props

Separator is a single control with no part tree. The styled wrapper adds:

Prop	Type	Default	Description
Orientation	string	"horizontal"	horizontal | vertical. Selects the Tailwind sizing class and is forwarded to NaviusSeparator for its role/aria-orientation.

Styling surface

Attributes on ZitsSeparator is merged with the base + orientation class set via Cn.Merge, caller classes applied last.

Parameter	Values
Orientation	horizontal · vertical

Data attribute hooks

None referenced by the styled class set beyond the role/aria-orientation semantics the composed NaviusSeparator primitive already owns.

Underlying primitives

• NaviusSeparator