# Marquee

**Path:** Components/Data Display

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Marquee

 RbMarquee provides infinite scrolling content animation. Perfect for news tickers,
 stock prices, announcements, and promotional banners.

 Basic Usage

 Simple marquee with text and custom content.

 Show code

 Simple Marquee

 Basic horizontal scrolling content.

 Welcome to RubicBlazor 
 Build beautiful UIs 
 Fast and responsive 
 Easy to use components 

 With Border and Rounded

 Marquee with visual styling options.

 HTML

 CSS

 JavaScript

 Blazor

 C#

 .NET

 With Custom Content

 Marquee can contain any content including badges, icons, and cards.

 New Feature

 Updated

 Hot

 Trending

 Sale

 Direction

 Control scroll direction with the Reverse parameter.

 Show code

 Default Direction (Left to Right)

 Content scrolls from right to left by default.

 Scrolling Left

 Default Direction

 Continuous Loop

 Reverse Direction

 Use Reverse to scroll in the opposite direction.

 Scrolling Right 

 Reverse Direction 

 Opposite Flow 

 Bidirectional Example

 Combine multiple marquees for visual effect.

 News

 Updates

 Announcements

 Events

 Sports

 Weather

 Finance

 Technology

 Vertical

 Vertical scrolling for notification feeds and social media style content.

 Show code

 Vertical Scrolling

 Content scrolls vertically from bottom to top.

 Notification 1

 Notification 2

 Notification 3

 Notification 4

 Notification 5

 Vertical Reverse

 Content scrolls from top to bottom with Reverse parameter.

 Message A

 Message B

 Message C

 Message D

 Social Feed Style

 Vertical marquee for social media feed or notifications.

 John liked your post 

 Sarah started following you 

 Mike commented on your photo 

 Emma shared your story 

 Alex mentioned you in a comment 

 Side by Side

 Multiple vertical marquees with different directions.

 Up 1

 Up 2

 Up 3

 Down 1

 Down 2

 Down 3

 Pause on Hover

 Pause animation when user hovers to allow reading content.

 Show code

 Pause on Hover

 Hover over the marquee to pause the animation. Try it!

 Hover over me to pause

 Read this text at your own pace

 Move mouse away to resume

 Perfect for readable content

 Comparison

 Compare behavior with and without PauseOnHover.

 With PauseOnHover (hover to pause) 
 News Item 1

 News Item 2

 News Item 3

 News Item 4

 Without PauseOnHover (continuous) 
 News Item 1

 News Item 2

 News Item 3

 News Item 4

 Vertical with Pause on Hover

 Pause on hover works with vertical scrolling too.

 New message received 

 Task completed successfully 

 System alert detected 

 Update available 

 Interactive News Ticker

 Realistic news ticker that pauses for reading.

 BREAKING: Technology stocks surge amid AI boom

 WEATHER: Sunny skies expected throughout the week

 SPORTS: Local team advances to championship finals

 BUSINESS: New startup raises $50M in funding round

 Use Cases

 Real-world examples: stock tickers, news headlines, tech stacks, and promotions.

 Show code

 Stock Ticker

 Real-time stock market display.

 AAPL 
 182.52 

 GOOGL 
 141.80 

 MSFT 
 378.91 

 AMZN 
 178.25 

 TSLA 
 248.50 

 News Headlines

 Breaking news ticker.

 Breaking: Major technology conference announced for next month

 World leaders meet to discuss climate change initiatives

 Markets reach all-time high amid positive economic outlook

 Technology Stack

 Showcase skills or technologies.

 HTML5

 CSS3

 JavaScript

 Blazor

 .NET

 Docker

 Promotional Banner

 E-commerce sale announcement.

 50% OFF on all items!

 Free shipping on orders over $50

 Limited time offer - Ends Sunday!

 Use code SAVE20 for extra discount

 RTL Support

 Use Arabic marquee content in a local RTL container and reverse the flow explicitly only when needed.

 Show code

 شريط تنبيهات RTL

 تم اعتماد الطلب رقم PO-2026-184

 آخر موعد لتسليم الفواتير هو 15 يوليو

 يرجى مراجعة المرفقات قبل الإرسال النهائي

 اتجاه معاكس عند الحاجة

 Support Window 08:00 - 17:00

 رقم التذكرة: INC-4431

 الرجاء تحديث حالة البلاغ بعد التنفيذ

 ✕

 Contents