Skip to main content

Floating Bar Templates

Floating bars are slim notification bars that appear at the top or bottom of the screen. They're less intrusive than popups while still capturing attention.

Overview​

PropertyValue
Template Count34+
PositionTop or bottom of viewport
OverlayNo (content remains accessible)
Best ForAnnouncements, cookies, persistent CTAs

Common Use Cases​

Announcements​

  • Sale notifications
  • Shipping updates
  • New feature alerts
  • Event promotions
  • GDPR compliance
  • Privacy notices
  • Cookie preferences
  • Tracking consent

Persistent CTAs​

  • Newsletter signup
  • App download prompts
  • Limited offers
  • Contact shortcuts

Status Updates​

  • Business hours
  • Delivery times
  • System status
  • Holiday notices

Template Styles​

Minimal Bars​

Simple, unobtrusive designs:

  • Single line of text
  • One action button
  • Subtle colors
  • Small height

Best for: Simple announcements, cookie notices

Bold Bars​

Attention-grabbing designs:

  • Vibrant backgrounds
  • Strong typography
  • Prominent CTAs
  • Animation effects

Best for: Sales, promotions, urgent notices

Multi-Element Bars​

Feature-rich designs:

  • Text + button + close
  • Countdown timers
  • Progress indicators
  • Multiple links

Best for: Complex promotions, feature-rich notices

Position Options​

Top Bar​

[=================== BAR ===================]
[                                           ]
[              Page Content                 ]
[                                           ]

Pros:

  • High visibility
  • Natural reading flow
  • Common pattern

Cons:

  • May conflict with navigation
  • Can feel pushy

Bottom Bar​

[                                           ]
[              Page Content                 ]
[                                           ]
[=================== BAR ===================]

Pros:

  • Less intrusive
  • Doesn't block content
  • Good for persistent CTAs

Cons:

  • May be overlooked
  • Can conflict with mobile UI

Layout Patterns​

Text + Button​

[Text message here...] [Button] [X]

Centered Text​

[X] [        Centered message        ] [X]

Icon + Text + Action​

[Icon] [Message text] [Link] [X]

Full-Width Form​

[Label] [Email input] [Subscribe] [X]

Customization Tips​

Colors​

  • Match brand colors
  • Ensure text contrast
  • Consider dark/light mode
  • Test against page content

Sizing​

  • Height: 40-60px typical
  • Full viewport width
  • Responsive text sizing
  • Touch-friendly buttons (44px+)

Content​

  • Keep text short (one line ideal)
  • Clear, actionable CTA
  • Include close option
  • Urgency when appropriate

GDPR-compliant patterns:

We use cookies to improve your experience. [Accept] [Learn More]

Detailed Options​

Cookie settings: [Essential] [Analytics] [Marketing] [Save Preferences]

Consent + Link​

By continuing, you agree to our cookie policy. [Accept All] [Manage]

Countdown Timers​

Add urgency with timers:

Sale ends in: [02:15:30] - [Shop Now]

Features:

  • Days, hours, minutes, seconds
  • Auto-updates
  • End behavior (hide/show message)

Animation Options​

Entry Animations​

  • Slide down (top bars)
  • Slide up (bottom bars)
  • Fade in
  • None (instant)

Attention Effects​

  • Subtle pulse
  • Shake (use sparingly)
  • Glow
  • Color shift

Behavior Settings​

Sticky vs. Static​

TypeBehavior
StickyStays fixed while scrolling
StaticScrolls with page

Auto-Dismiss​

  • Time-based dismissal
  • Scroll-based dismissal
  • Interaction-based (after click)

Remember Dismissal​

  • Cookie-based memory
  • Session-only
  • Persistent

Best Practices​

  1. Keep it slim — Don't block too much content
  2. Clear close button — Users should easily dismiss
  3. One message — Focus on single purpose
  4. Mobile test — Verify on small screens
  5. Contrast — Ensure readability
  6. Timing — Consider when to show

Common Mistakes​

❌ Too tall (blocking content) ❌ No close button ❌ Text too small ❌ Low contrast ❌ Too many elements ❌ Covering navigation

Template Examples​

Sale Announcement​

  • Gradient background
  • Bold text + discount
  • Shop Now button
  • Close X
  • Neutral background
  • Clear explanation
  • Accept + Settings buttons
  • Privacy link

Newsletter Signup​

  • Email input field
  • Subscribe button
  • Compact height
  • Clean design

Free Shipping​

  • Icon (truck)
  • Threshold message
  • Shop link
  • Dismissible

Integration Tips​

With Headers​

  • Account for fixed headers
  • z-index management
  • Spacing below bar

Mobile Considerations​

  • Touch targets 44px+
  • Readable text (14px+)
  • Simple layouts
  • Bottom position often better