# Separator

Source: https://lumeo.nativ.sh/components/separator

# Separator

Visually or semantically separates content.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Horizontal

#### Lumeo UI

An open-source component library for Blazor.

Docs

Source

Blog

Preview Code

In a Card

Subtotal $89.00

Shipping $4.99

Tax $7.12

Total $101.11

Preview Code

Vertical

Home

Components

Themes

GitHub

Preview Code

With Label

or continue with

Section Title

Preview Code

Orientation — interactive

Pick an orientation to see it applied live.

Horizontal Vertical

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](/components/card) — Grouped content containers where separators divide sections
-   [Accordion](/components/accordion) — Collapsible sections that visually separate content groups
-   [DropdownMenu](/components/dropdown-menu) — Uses separators to divide menu item groups