How to Create a React Sticky Header using TailwindCSS

Hello, hustlers! In this tutorial, you'll learn how to create a sticky header/navbar in React using TailwindCSS classes. Sticky headers don't need javascript to work but in this tutorial, we'll use React to create a reusable component.

In general, a sticky header is usually a navigation bar that sticks to the top of the page when a certain scroll threshold has been reached. In the early times of the web, you can not implement this without using javascript, but now there's a CSS property-value position:sticky that can be used.

A sticky header is different from a fixed header where it's always on top regardless of the scroll position.

Sometimes, the position:sticky CSS property does not work if any parent elements have overflow property set to true, hidden, or auto.

We also have to set at least one position value for top, bottom, left, right to specify where the sticky header should stick. For this tutorial, we'll use top:0px.

Here's the final output of what we'll be making today.

1. Set up a react framework with TailwindCSS. We'll use NextJS + TailwindCSS for this tutorial. 
2. Create a reusable StickyHeader component.

We'll have to install tailwindCSS to whatever react framework we're using.

Starting From Scratch

In this tutorial we're going to use NextJS and to speed up the process, we'll use a  starter template with TailwindCSS installed. All we have to do is to run the following command:

After it's done installing, you can run the following commands to start the local dev server:

Installing TailwindCSS in an Existing Project

If you're starting from an existing project, you'll have to install TailwindCSS for that specific framework. You can check out their documentation for specific steps.

If you need to install Tailwind CSS in a NextJS project, I also have a guide for that, check it out here: How to Setup NextJS and TailwindCSS in 2023.

Once you've already installed Tailwind CSS, let's now create a reusable component in React. First, we'll create an ordinary header with no sticky and refactor our code then apply the sticky property to it and make it reusable.

First, create the file components/Header.tsx:

Now, let's use this component on a page. Let's modify pages/index.tsx :

Now, we have a layout, but our header component is not sticking to the top when we scroll:

To make it sticky let's modify our Header.tsx file and add the `sticky top-0` classes:

Now, our header sticks to the top:

Just make sure that when you modify the parent elements later on, don't add overflow:hidden/auto/true so that the position:sticky will work properly.

The full code can be accessed at GitHub: jmarioste/react-sticky-header-tailwind-tutorial. 

You can play with the demo on Stackblitz: React Sticky Header Tailwind Tutorial

You learned how to create a react sticky header component by using Tailwind CSS classes. If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter.

1. TailwindCSS Docs

Credits: Image by Matteo Orlandi from Pixabay