Today I would like to write a tutorial on how you can code a sticky banner component that you can use to show messages or marketing CTA elements to your website users based on a banner that is "sticked" to the top or bottom part of your page.
This tutorial will use the utility-first CSS framework called Tailwind CSS and it will also leverage the JS interactivity and data attributes from the Flowbite UI component library.
Here's a quick preview of the component that we will build:
Without further ado, let's get started!
Tailwind CSS Sticky Banner
The first thing that we need to do is set up the HTML tags and for this purpose we will use a generic <div> tag, a paragraph for the text, and finally a button for the close behaviour with a SVG icon:
<div id="sticky-banner" tabindex="-1">
<div>
<p>
<span>
<span class="sr-only">Light bulb</span>
</span>
<span>New brand identity has been launched for the <a href="https://flowbite.com">Flowbite Library</a></span>
</p>
</div>
<div>
<button>
<span class="sr-only">Close banner</span>
</button>
</div>
</div>
We added an id and tabindex="-1" so that we can improve accessibility for screen reader users by skipping the banner when navigating the website.
The next step would be to use the fixed and positioning classes from Tailwind CSS to make the banner stick to the top side of the page as you scroll down the content:
<div id="sticky-banner" tabindex="-1" class="fixed top-0 left-0 z-50">
<div>
<p>
<span>
<span class="sr-only">Light bulb</span>
</span>
<span>New brand identity has been launched for the <a href="https://flowbite.com">Flowbite Library</a></span>
</p>
</div>
<div>
<button>
<span class="sr-only">Close banner</span>
</button>
</div>
</div>
We also added a Z-index class so that it will go above all the other elements as you scroll down.
The component doesn't look too good though so let's proceed by adding some classes to position the elements inside and style them with colors, shadows, and spacings:
<div id="sticky-banner" tabindex="-1" class="fixed top-0 left-0 z-50 flex justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
<div class="flex items-center mx-auto">
<p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
<span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full dark:bg-gray-600">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"></path>
</svg>
<span class="sr-only">Light bulb</span>
</span>
<span>New brand identity has been launched for the <a href="https://flowbite.com" class="inline font-medium text-blue-600 underline dark:text-blue-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline">Flowbite Library</a></span>
</p>
</div>
</div>
Let's also add the dismiss button to the component:
<div class="flex items-center">
<button data-dismiss-target="#sticky-banner" type="button" class="flex-shrink-0 inline-flex justify-center items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white">
<svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close banner</span>
</button>
</div>
Make sure that you have Flowbite's JS installed either via the CDN or using NPM by following the quickstart guide.
For simplicity, just include the following script tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>
Here's the full code for the banner:
<div id="sticky-banner" tabindex="-1" class="fixed top-0 left-0 z-50 flex justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
<div class="flex items-center mx-auto">
<p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
<span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full dark:bg-gray-600">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"></path>
</svg>
<span class="sr-only">Light bulb</span>
</span>
<span>New brand identity has been launched for the <a href="https://flowbite.com" class="inline font-medium text-blue-600 underline dark:text-blue-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline">Flowbite Library</a></span>
</p>
</div>
<div class="flex items-center">
<button data-dismiss-target="#sticky-banner" type="button" class="flex-shrink-0 inline-flex justify-center items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white">
<svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close banner</span>
</button>
</div>
</div>
Congratulations! This is how the banner should look on light and dark mode:
Check out how you can enable dark mode with Tailwind CSS on the Flowbite Docs and also use a theme switcher based on localStorage.
More components
This is only one example of the many sticky banner components built with Tailwind CSS from the open-source Flowbite Library - so make sure you check out all the examples that you can directly copy-paste inside your project.
Credits
This tutorial could not have been done without the following awesome open-source resources:
Top comments (0)