Separator
Visually or semantically separates content.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Separator />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
16 tests across 1 file. Auto-generated from the test suite.
When to Use
- Visual dividers between content sections on a page
- Section breaks in cards, dialogs, or sidebars
- Menu separators to group related items in dropdown or context menus
- Inline breadcrumb-style dividers between horizontal navigation links
Lumeo UI
An open-source component library for Blazor.
Docs
Source
Blog
Subtotal
$89.00
Shipping
$4.99
Tax
$7.12
Total
$101.11
Home
Components
Themes
GitHub
or continue with
Section Title
Edge-to-edge divider
Inset divider (Material look)
Below the inset divider
Pick an orientation to see it applied live.
Above the separator
Below the separator
API Reference
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
| Orientation | Lumeo.Orientation | Lumeo.Orientation.Horizontal | Axis the rule is drawn along: Horizontal renders a full-width line, Vertical a full-height line. Defaults to Horizontal. |
| Decorative | bool | true | When true (the default), the separator is purely visual and exposes role="none" with no orientation — assistive tech skips it, matching Radix's decorative default. Set to false for a semantic separator that conveys structure (e.g. between menu groups or list sections): the element then carries role="separator" plus an aria-orientation matching Orientation. The implicit ARIA orientation of a separator is horizontal, so a vertical one must declare it explicitly. |
| Inset | bool | false | When true, the rule is inset from the container edges (a 0.75rem margin on the long axis: mx-3 when horizontal, my-3 when vertical) instead of spanning the full length — the Material / MudBlazor "inset divider" look, softer than an edge-to-edge line. Default false. |
| ChildContent | RenderFragment? | — | Optional label rendered centered on the line (horizontal orientation only), producing a "text divider" (two rule segments flanking the text) instead of a plain line. |
| Class | string? | — | Additional CSS classes merged onto the separator element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures any unmatched attributes and applies them to the separator element. |
Related Components
- Card — Grouped content containers where separators divide sections
- Accordion — Collapsible sections that visually separate content groups
- DropdownMenu — Uses separators to divide menu item groups