Svelte Sticky Banner - Flowbite

Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS

Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scrolls down the main content area.

Sticky banners are perfect for:

  • Marketing campaigns and promotional announcements
  • Important updates or system notifications
  • Cookie consent notices and privacy disclosures
  • Newsletter signups and lead generation
  • App download prompts for mobile users
  • Time-sensitive offers and limited-time deals

Explore the following examples based on various styles, sizes, and positionings to leverage the sticky banner component and increase marketing conversions with a responsive element supporting dark mode.

Setup #

  • Svelte
<script lang="ts">
  import { Banner } from "flowbite-svelte";
</script>

Default sticky banner #

Use this example to show a text message for announcement with a CTA link, an icon element, and a close button to dismiss the banner. This is the most common banner pattern, providing essential information with a clear action.

The close button allows users to dismiss the banner, improving user experience by giving them control over the interface.

  • Svelte
<script lang="ts">
  import { Banner, Skeleton, ImagePlaceholder } from "flowbite-svelte";
  import { BullhornSolid } from "flowbite-svelte-icons";
</script>

<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner class="absolute">
  <p class="me-8 flex items-center text-sm font-normal text-gray-500 md:me-0 dark:text-gray-400">
    <span class="me-3 inline-flex rounded-full bg-gray-200 p-1 dark:bg-gray-600">
      <BullhornSolid class="h-3 w-3 text-gray-500 dark:text-gray-400" />
      <span class="sr-only">Light bulb</span>
    </span>
    <span>
      New brand identity has been launched for the <a
        href="https://flowbite.com"
        class="text-primary-600 dark:text-primary-500 inline font-medium underline decoration-solid decoration-2 underline-offset-2 hover:no-underline dark:decoration-1"
      >
        Flowbite Library
      </a>
    </span>
  </p>
</Banner>

Bottom banner position #

This example can be used to position the sticky banner to the bottom side of the page instead of the top side. Bottom banners are ideal for:

  • Cookie consent notices (standard practice)
  • App install prompts on mobile devices
  • Chat support widgets or help options
  • Non-intrusive notifications that don’t block primary navigation

Bottom positioning is generally less intrusive and allows users to focus on main content while still being aware of the banner.

  • Svelte
<script lang="ts">
  import { Banner, Skeleton, ImagePlaceholder, A } from "flowbite-svelte";
  import { SalePercentSolid, ArrowRightOutline } from "flowbite-svelte-icons";
</script>

<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner type="bottom" class="absolute">
  <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
    <span class="me-3 inline-flex rounded-full bg-gray-200 p-1 dark:bg-gray-600">
      <SalePercentSolid class="h-4 w-4 text-gray-500 dark:text-gray-400" />
      <span class="sr-only">Discount coupon</span>
    </span>
    <span>
      Get 5% commission per sale <A href="https://flowbite.com">
        Become a partner <ArrowRightOutline class="ms-2 h-3 w-3" />
      </A>
    </span>
  </p>
</Banner>

Marketing CTA banner #

Use this example to show a text message for announcement with a CTA link. This streamlined design focuses attention on the call-to-action, making it perfect for:

  • Sales promotions with specific discount codes
  • Event announcements with registration links
  • Product launches with “Learn More” actions
  • Feature announcements directing to documentation

Keep the message concise and the CTA clear to maximize conversion rates.

  • Svelte
<script lang="ts">
  import { Banner, Skeleton, ImagePlaceholder } from "flowbite-svelte";
</script>

<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner class="absolute top-6 left-1/2 w-[calc(100%-2rem)] -translate-x-1/2 rounded-lg border border-gray-100 bg-white shadow-xs lg:max-w-7xl dark:border-gray-600 dark:bg-gray-700">
  <a href="https://flowbite-svelte.com/" class="mb-2 flex items-center border-gray-200 md:me-4 md:mb-0 md:border-e md:pe-4 dark:border-gray-600">
    <img src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" class="me-2 h-6" alt="Flowbite Logo" />
    <span class="self-center text-lg font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
  </a>
  <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">Build websites even faster with components on top of Tailwind CSS</p>
</Banner>

Newsletter sign-up banner #

This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.

Newsletter banners are effective for:

  • Growing your email list with minimal friction
  • Content marketing campaigns
  • Blog subscriptions and update notifications
  • Community building initiatives

Best practices:

  • Keep form fields minimal (usually just email)
  • Clearly communicate the value of subscribing
  • Include privacy reassurance
  • Make the close button easily accessible
  • Svelte
<script lang="ts">
  import { Banner, Skeleton, ImagePlaceholder, Input, Label, Button } from "flowbite-svelte";
</script>

<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner classes={{ insideDiv: "w-full sm:w-auto" }} class="absolute">
  <form action="/" class="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-4">
    <Label for="email" class="shrink-0 text-gray-500 dark:text-gray-400">Sign up for our newsletter</Label>
    <Input type="email" id="email" placeholder="Enter your email" class="bg-white md:w-64 dark:border-gray-500 dark:bg-gray-600" required />
    <Button type="submit" class="w-full sm:w-auto">Subscribe</Button>
  </form>
</Banner>

Informational banner #

This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links.

Informational banners work well for:

  • System maintenance announcements
  • Policy updates requiring user attention
  • Security alerts or important notifications
  • Multi-option decisions (e.g., “Learn More” vs “Update Now”)

The two-button layout provides users with choice, allowing them to take immediate action or learn more before deciding.

  • Svelte
<script lang="ts">
  import { Banner, Skeleton, ImagePlaceholder, Button } from "flowbite-svelte";
  import { BookOpenOutline, ArrowRightOutline } from "flowbite-svelte-icons";
</script>

<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner class="absolute">
  <div class="mb-4 md:me-4 md:mb-0">
    <h2 class="mb-1 text-base font-semibold text-gray-900 dark:text-white">Integration is the key</h2>
    <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
      You can integrate Flowbite with many tools to make your work even more efficient and lightning fast based on Tailwind CSS.
    </p>
  </div>
  <div class="flex shrink-0 items-center gap-3">
    <Button href="/" size="sm" color="alternative">
      <BookOpenOutline class="me-2 h-3 w-3" /> Learn more
    </Button>
    <Button href="/" size="sm">
      Get started <ArrowRightOutline class="ms-2 h-3 w-3" />
    </Button>
  </div>
</Banner>

Transition #

The transition and params props allow you to apply transition effects to components when they enter or leave the view. Svelte provides built-in transitions like fly, slide, blur, fade, and scale.

This example demonstrates a sliding transition using the slide transition from svelte/transition. Smooth transitions:

  • Create a more polished, professional feel
  • Reduce jarring sudden appearances
  • Provide visual continuity
  • Can be customized with duration and easing

Choose transitions that match your site’s overall animation style and don’t distract from the banner’s message.

  • Svelte
<script lang="ts">
  import { slide } from "svelte/transition";
  import { quintOut } from "svelte/easing";
  import { Banner, Skeleton, ImagePlaceholder, A } from "flowbite-svelte";
  import { BullhornSolid } from "flowbite-svelte-icons";

  const params = { delay: 250, duration: 500, easing: quintOut };
</script>

<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner transition={slide} {params} class="absolute">
  <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
    <span class="me-3 inline-flex rounded-full bg-gray-200 p-1 dark:bg-gray-600">
      <BullhornSolid class="h-3 w-3 text-gray-500 dark:text-gray-400" />
      <span class="sr-only">Light bulb</span>
    </span>
    <span>
      New brand identity has been launched for the <A href="https://flowbite.com" class="font-medium underline decoration-solid decoration-2 underline-offset-2 hover:no-underline dark:decoration-1">
        Flowbite Library
      </A>
    </span>
  </p>
</Banner>

onclose #

A reusable function that manages banner dismissal state with localStorage persistence using the onclose callback. It checks if the banner was previously dismissed on mount, provides two-way binding for the open state, and automatically saves dismissal to localStorage.

Use the following example for a reusable function that keeps announcement banners hidden after dismissal across page refreshes. This is essential for:

  • Cookie consent banners (legal requirement)
  • One-time announcements that shouldn’t repeatedly bother users
  • Promotional messages where user preference should be respected
  • Improving user experience by not showing the same message repeatedly

Implementation tips:

  • Use unique keys for different banners
  • Consider time-based expiration for some banners
  • Allow re-showing critical banners after significant updates
  • Test across different browsers and private browsing modes
  • Svelte
<script lang="ts">
  import { onMount } from "svelte";
  import { Banner, P } from "flowbite-svelte";

  // reusable logic for dismissable banner with localStorage
  function useDismissableBanner(storageKey: string) {
    let open = $state(false);

    onMount(() => {
      open = !localStorage.getItem(storageKey);
    });

    function onclose(_event: MouseEvent) {
      localStorage.setItem(storageKey, "true");
      open = false;
    }

    return {
      get open() {
        return open;
      },
      set open(value) {
        open = value;
      },
      onclose
    };
  }

  const banner = useDismissableBanner("announcement-example");
</script>

<Banner bind:open={banner.open} onclose={banner.onclose}>
  <P>This keeps announcement banners hidden after dismissal across page refreshes!</P>
</Banner>

Accessibility #

The Banner component follows accessibility best practices:

  • Keyboard Navigation: Close buttons are fully keyboard accessible
  • Focus Management: Proper focus indicators for interactive elements
  • Screen Readers: Appropriate ARIA labels and roles for announcements
  • Dismissible: Always provide a way to close banners
  • Non-Intrusive: Banners should not trap focus or prevent page interaction
  • Color Contrast: Text and buttons meet WCAG contrast requirements

Best Practices #

When implementing sticky banners, consider these guidelines:

  • Respect User Choice: Always include a dismiss option for non-critical banners
  • Prioritize Content: Don’t let banners dominate the viewport, especially on mobile
  • Timing Matters: Consider delaying banner appearance slightly after page load
  • One at a Time: Avoid showing multiple banners simultaneously
  • Mobile First: Test banner layouts on small screens
  • Performance: Ensure banners don’t impact page load performance
  • Legal Compliance: For cookie banners, follow regional regulations (GDPR, CCPA)
  • Clear Actions: Make CTAs obvious and easy to click
  • A/B Testing: Test different messages and designs for optimal conversion

When to Use Banners vs. Other Components #

  • Banner: Site-wide announcements, marketing messages, persistent notifications
  • Alert: Contextual feedback, form validation, inline messages
  • Toast: Temporary feedback, success/error messages, auto-dismissing notifications
  • Modal: Critical information requiring user action, complex forms, focused tasks

See also #

Loading related links...

Component data #

The component has the following props, type, and default values. See types page for type information.

Loading...

References #

GitHub Links #

LLM Link #

Badge Bottom Navigation