Separator
Overview
Section titled “Overview”Separator visually or semantically separates content. It supports horizontal (the
default) and vertical orientations, exposing data-orientation for orientation-aware
styling, and can be marked Decorative to drop its semantics for a purely visual
divider.
Anatomy
Section titled “Anatomy”@using Navius.Primitives.Components.Separator
<NaviusSeparator />The separator. Renders a div.
| Prop | Type | Default | Description |
|---|---|---|---|
Orientation |
string |
"horizontal" |
"horizontal" or "vertical". Any other value normalizes to "horizontal". |
Decorative |
bool |
false |
When true, drops role="separator" and aria-orientation for a purely visual divider. |
ChildContent |
RenderFragment? |
- | Separator content. |
Attributes |
IDictionary<string, object>? |
- | Forwarded to the rendered div. |
Data attributes
Section titled “Data attributes”| Part | Attribute | Description |
|---|---|---|
| Root | data-orientation |
"horizontal" | "vertical". |
| Root | data-navius-separator |
Present on every separator. |
ARIA mechanism
Section titled “ARIA mechanism”Root implements the separator WAI-ARIA APG pattern. Unless Decorative, it carries
role="separator"; a vertical separator also exposes aria-orientation="vertical"
(the horizontal orientation is the ARIA default and is omitted). A separator is a
non-focusable static divider, so it has no keyboard interactions. This mechanism is
covered by the Playwright browser test suite and gated by axe-core in CI.