# Marquee

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

# Marquee

Infinitely scrolling horizontal band of children.

## When to Use

-   Showcase partner logos, testimonials, or feature highlights in a continuous loop.
-   Create a live ticker for news headlines, announcements, or metrics.
-   Use `PauseOnHover` to let users read individual items comfortably.

Preview Code

Default (Left Scroll)

Acme Corp

Globex

Initech

Umbrella

Stark Industries

Dunder Mifflin

Prestige Worldwide

Acme Corp

Globex

Initech

Umbrella

Stark Industries

Dunder Mifflin

Prestige Worldwide

Copy Code

Preview Code

Reverse Direction

Blazor

.NET 10

Tailwind CSS

Open Source

Components

UI Library

WASM

Server-Side

Blazor

.NET 10

Tailwind CSS

Open Source

Components

UI Library

WASM

Server-Side

Copy Code

Preview Code

Fast Speed

Acme Corp

Globex

Initech

Umbrella

Stark Industries

Dunder Mifflin

Prestige Worldwide

Acme Corp

Globex

Initech

Umbrella

Stark Industries

Dunder Mifflin

Prestige Worldwide

Copy Code

## API Reference

### Marquee

Property

Type

Default

Description

Speed

MarqueeSpeed

Normal

Scroll speed: `Slow` (60s), `Normal` (30s), `Fast` (12s) animation duration.

Direction

MarqueeDirection

Left

Initial scroll direction: `Left` or `Right`.

Reverse

bool

false

Inverts the Direction. Shorthand for setting `Direction="Right"`.

PauseOnHover

bool

false

Pauses the animation while the cursor hovers over the marquee.

Vertical

bool

false

Switches to vertical scroll mode.

ChildContent

RenderFragment?

null

Items to scroll. Duplicated automatically to create the infinite loop effect.

Class

string?

null

Additional CSS classes merged onto the root element.

## Related Components

-   [Carousel](/components/carousel) — Slide-based rotator with manual navigation controls.
-   [TextReveal](/components/text-reveal) — Word-by-word reveal animation on scroll.