Sticky/ Dynamic Navbar by Using react-headroom

Table of Contents

You must have seen Navbars on some websites that hide and show when you scroll a little bit, that’s called Sticky or Dynamic Navbar.

You can implement this yourself in React using your React skills, but if you want to save some time and use a ready-made React component to implement Dynamic Navbar in your React app, there’s a React package called react-headroom.

React Headroom gives out-of-the-box sticky hide and shows behavior with a very smooth transition and you can apply it on any component but it’s mainly used for Headers or Navbars.

To demonstrate this I am going to create a new React project and use react-headroom in that.

Creating New React Project

First of I am going to create a new React project but if you already have a project created then you can skip this part.

To create a new react App you can you npm create-react-app projectName or you can use any other build tools like Vite or create a Next Js app.

After creating my new React App and some changes my App.js looks like this

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello Coders!</h1>
     
    </div>
  );
}

Creating a simple Navbar

We’ll create a simple Navbar in our app so that we can make it sticky later.

Let’s just add some navigation links like Home, About Us, and Contact Us in Navbar

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <header>
        <nav>
          <ul className="nav-links">
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About Us</a>
            </li>
            <li>
              <a href="/contact">Contact Us</a>
            </li>
          </ul>
        </nav>
      </header>
      <h1>Hello Coders!</h1>
    </div>
  );
}

We are going to style it a little bit with CSS in style.css file

* {
  margin: 0; /* removing unnecessary margins from document*/
}

.App {
  font-family: sans-serif;
  text-align: center;
}
header {
  background-color: #90ffb2; /* Canging bg color to make it look different from content body*/
  padding: 10px;
}
.nav-links {
  list-style-type: none; /* Remove bullet dots */
  display: flex; /* Display the navigation links horizontally */
  justify-content: center; /* Center the navigation links horizontally */
  padding: 0; /* Remove default padding */
}

.nav-links li {
  margin-right: 20px; /* Add some spacing between the navigation links */
}

Adding dummy content

We have to make our page longer in order to make it scrollable so that we can see the behavior of the header when we scroll.

Lets add some dummy paragraphs.

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <header>
        <nav>
          <ul className="nav-links">
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About Us</a>
            </li>
            <li>
              <a href="/contact">Contact Us</a>
            </li>
          </ul>
        </nav>
      </header>
      <h1>Hello Coders!</h1>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan pretium neque eu imperdiet. Integer eget suscipit sapien. Vivamus non massa ex. Aliquam et lacus id diam vulputate elementum. Nunc viverra maximus nulla, vel gravida mi mollis et. Sed dictum tempor nulla, at hendrerit mauris condimentum non. Maecenas non mi nec purus molestie dictum.

Nam malesuada iaculis imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent consequat justo vitae facilisis dapibus. Integer feugiat aliquet felis, ac pellentesque ligula convallis non. Vivamus commodo eu mauris non tincidunt. Vivamus quis arcu fermentum, viverra libero quis, varius orci. Pellentesque augue ante, posuere ut ultrices et, volutpat at ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean aliquam urna mi, ac ornare nisl euismod sit amet. Nullam a ligula in sapien imperdiet lobortis. Cras fringilla ornare leo, non feugiat neque egestas et. Ut laoreet lorem vel pulvinar pellentesque. Donec ut tortor ut velit maximus vulputate. Aliquam placerat arcu at nibh viverra blandit.

Nam auctor quis ligula vel maximus. Nam ac placerat nunc. Vivamus eget nibh sit amet ex bibendum suscipit. Suspendisse malesuada eros eget diam malesuada feugiat. Pellentesque id sollicitudin nulla. Praesent blandit mattis gravida. Duis varius mauris sit amet diam fermentum elementum. Etiam lacinia condimentum elit, non ornare purus finibus eu. Ut tempor mollis odio vitae facilisis. Curabitur quis ligula augue. Aliquam scelerisque scelerisque risus, eu consectetur turpis aliquam nec. Etiam a justo id orci ultrices sagittis quis eget massa. Vestibulum diam nunc, venenatis nec ipsum hendrerit, vehicula scelerisque diam. Mauris ornare convallis massa sit amet sollicitudin.

Aliquam nec justo maximus velit fringilla fringilla et ut dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin et elit mattis, vestibulum nulla dignissim, tempus ligula. Sed id turpis varius, luctus mauris eu, suscipit felis. Aliquam euismod tincidunt mauris ac posuere. Mauris efficitur bibendum orci, eget convallis libero hendrerit vitae. Etiam suscipit dui purus, ut volutpat neque tristique quis. Suspendisse potenti. Vivamus egestas, augue at semper efficitur, dui massa euismod odio, in consectetur velit nisi dignissim orci. Aenean sit amet ultrices arcu, eget rhoncus est. Sed tempor hendrerit accumsan. Pellentesque tempor maximus posuere. Donec in finibus ex, at volutpat odio.

Aenean at erat et velit lacinia vehicula. Praesent a magna vitae dolor rhoncus ullamcorper ac at est. Nulla imperdiet elit eget lectus egestas, quis molestie erat pulvinar. Quisque eget nisl dapibus, mattis eros id, euismod risus. Nam dignissim leo non metus placerat, eget pellentesque dolor mollis. Pellentesque eu aliquam turpis. Curabitur mauris turpis, vestibulum ac placerat nec, semper at mi. Nam ornare turpis eu ornare pharetra. Quisque eleifend velit magna, nec accumsan orci porttitor a.
      </p>
    </div>
  );
}

Now our app looks like this

Installing react-headroom package

To implement a sticky navbar we are going to use react-headroom which is an NPM package so in order to use it in our app we need to install it.

You can also follow the official documentation for this package by clicking here.

To install this package run the following command in the terminal.

npm install react-headroom

Importing Headroom component

Now that the package has been successfully installed we can use it as a component anywhere in your app.

We can import the Headroom component from react-headroom like this.

import Headroom from "react-headroom";

Using Headroom component

Now it is time to use the Headroom component to make our header sticky and dynamic when we scroll.

We just need to wrap our header inside <Headroom> </Headroom> and everything will be handled automatically.

import "./styles.css";
import Headroom from "react-headroom";
export default function App() {
  return (
    <div className="App">
      <Headroom>
        <header>
          <nav>
            <ul className="nav-links">
              <li>
                <a href="/">Home</a>
              </li>
              <li>
                <a href="/about">About Us</a>
              </li>
              <li>
                <a href="/contact">Contact Us</a>
              </li>
            </ul>
          </nav>
        </header>
      </Headroom>
      <h1>Hello Coders!</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan
        pretium neque eu imperdiet. Integer eget suscipit sapien. Vivamus non
        massa ex. Aliquam et lacus id diam vulputate elementum. Nunc viverra
        maximus nulla, vel gravida mi mollis et. Sed dictum tempor nulla, at
        hendrerit mauris condimentum non. Maecenas non mi nec purus molestie
        dictum. Nam malesuada iaculis imperdiet. Interdum et malesuada fames ac
        ante ipsum primis in faucibus. Praesent consequat justo vitae facilisis
        dapibus. Integer feugiat aliquet felis, ac pellentesque ligula convallis
        non. Vivamus commodo eu mauris non tincidunt. Vivamus quis arcu
        fermentum, viverra libero quis, varius orci. Pellentesque augue ante,
        posuere ut ultrices et, volutpat at ipsum. Pellentesque habitant morbi
        tristique senectus et netus et malesuada fames ac turpis egestas. Aenean
        aliquam urna mi, ac ornare nisl euismod sit amet. Nullam a ligula in
        sapien imperdiet lobortis. Cras fringilla ornare leo, non feugiat neque
        egestas et. Ut laoreet lorem vel pulvinar pellentesque. Donec ut tortor
        ut velit maximus vulputate. Aliquam placerat arcu at nibh viverra
        blandit. Nam auctor quis ligula vel maximus. Nam ac placerat nunc.
        Vivamus eget nibh sit amet ex bibendum suscipit. Suspendisse malesuada
        eros eget diam malesuada feugiat. Pellentesque id sollicitudin nulla.
        Praesent blandit mattis gravida. Duis varius mauris sit amet diam
        fermentum elementum. Etiam lacinia condimentum elit, non ornare purus
        finibus eu. Ut tempor mollis odio vitae facilisis. Curabitur quis ligula
        augue. Aliquam scelerisque scelerisque risus, eu consectetur turpis
        aliquam nec. Etiam a justo id orci ultrices sagittis quis eget massa.
        Vestibulum diam nunc, venenatis nec ipsum hendrerit, vehicula
        scelerisque diam. Mauris ornare convallis massa sit amet sollicitudin.
        Aliquam nec justo maximus velit fringilla fringilla et ut dolor.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
        cubilia curae; Proin et elit mattis, vestibulum nulla dignissim, tempus
        ligula. Sed id turpis varius, luctus mauris eu, suscipit felis. Aliquam
        euismod tincidunt mauris ac posuere. Mauris efficitur bibendum orci,
        eget convallis libero hendrerit vitae. Etiam suscipit dui purus, ut
        volutpat neque tristique quis. Suspendisse potenti. Vivamus egestas,
        augue at semper efficitur, dui massa euismod odio, in consectetur velit
        nisi dignissim orci. Aenean sit amet ultrices arcu, eget rhoncus est.
        Sed tempor hendrerit accumsan. Pellentesque tempor maximus posuere.
        Donec in finibus ex, at volutpat odio. Aenean at erat et velit lacinia
        vehicula. Praesent a magna vitae dolor rhoncus ullamcorper ac at est.
        Nulla imperdiet elit eget lectus egestas, quis molestie erat pulvinar.
        Quisque eget nisl dapibus, mattis eros id, euismod risus. Nam dignissim
        leo non metus placerat, eget pellentesque dolor mollis. Pellentesque eu
        aliquam turpis. Curabitur mauris turpis, vestibulum ac placerat nec,
        semper at mi. Nam ornare turpis eu ornare pharetra. Quisque eleifend
        velit magna, nec accumsan orci porttitor a.
      </p>
    </div>
  );
}

And now we successfully made our header dynamic, when we scroll down it will disappear and when we scroll up it will show up after scrolling for a second.

You can see the live demo of it on code sandbox.

Other props and customization

Customization

The React Headroom component is designed to be effortlessly integrated into your project, providing default animation settings that work seamlessly. However, if you wish to override the default animation, you have two options available.

The first option is to override the inline styles directly within the component. Here’s an example of how you can achieve this:

<Headroom style={{
  WebkitTransition: 'all .5s ease-in-out',
  MozTransition: 'all .5s ease-in-out',
  OTransition: 'all .5s ease-in-out',
  transition: 'all .5s ease-in-out'
}}>
  <h1>You can place any content you desire within the Headroom Component</h1>
</Headroom>

Alternatively, you can utilize CSS to customize the animation. The component includes a headroom class, along with headroom–pinned or headroom–unpinned classes based on its pinned state.

.headroom {
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.headroom--unfixed {
  position: relative;
  transform: translateY(0);
}

.headroom--scrolled {
  transition: transform 200ms ease-in-out;
}

.headroom--unpinned {
  position: fixed;
  transform: translateY(-100%);
}

.headroom--pinned {
  position: fixed;
  transform: translateY(0%);
}

As inline styles take precedence over CSS, you need to disable the inline styles by using the disableInlineStyles prop.

Additional Props

The React Headroom component offers several other props to enhance its functionality and customization:

onPin: A callback function that is invoked when the header is pinned.
onUnpin: A callback function that is triggered when the header is unpinned.
onUnfix: A callback function that is called when the header is no longer in a fixed position.
upTolerance: Specifies the scroll tolerance in pixels when scrolling up before the component is pinned.
downTolerance: Sets the scroll tolerance in pixels when scrolling down before the component is pinned.
disable: Disables the pinning and unpinning behavior of the component.
wrapperStyle: Allows you to pass custom styles for the wrapper, maintaining the component’s vertical space at the top of the page.
parent: Provides a custom “parent” element for scroll events. The parent prop should be a function that resolves to the desired element.
pinStart: Specifies the height in pixels where the header should start and stop pinning. This is useful when you have another element above the Headroom component.

These additional props provide you with further control and flexibility over the behavior and appearance of the React Headroom component.

Tutorend Tutorials

Sticky/ Dynamic Navbar by Using react-headroom

Creating New React Project

Creating a simple Navbar

Adding dummy content

Installing react-headroom package

Importing Headroom component

Using Headroom component

Other props and customization

Customization

Additional Props

Leave a Reply Cancel reply

Creating New React Project

Creating a simple Navbar

Adding dummy content

Installing react-headroom package

Importing Headroom component

Using Headroom component

Other props and customization

Customization

Additional Props

Related Posts

Mantine UI in Nextjs Setup Guide

Add Google Analytics in Nextjs with Quickest Method

How To Install and Use Flowbite in Next js

Using Notistack in Nextjs | React js

Using React Feather Icons in Next js

Find and Remove Unused NPM Packages from Your Project

Leave a Reply Cancel reply