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 />
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
Pick an orientation to see it applied live.
Above the separator
Below the separator
API Reference
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
| Orientation | Lumeo.Orientation | Horizontal | Direction of the separator line. Values: Horizontal, Vertical. |
| ChildContent | RenderFragment? | null | Label text displayed in the center of a horizontal separator. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
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