How to Implement Sticky Navbar in React

More users move away from browsing on the desktop to smaller screens every year. People also have increasing expectations regarding the user experience when browsing the internet.

Web developers have to adapt to users’ changing habits. Websites are becoming more responsive and adapted to mobile users.

A sticky navbar is a common feature in modern web applications. It allows users to easily navigate between pages without scrolling up to access the menu.

Implement Sticky Navbar in React

React is a JavaScript-based framework. It uses templating language JSX, which appears similar to HTML, but is different in some ways.

For example, it allows you to use JavaScript inside the JSX code. It can be styled similar to HTML, except in JSX, we use the className attribute.

To implement a sticky navbar in React, we must have a normal navbar first. At first glance, JSX code might look indistinguishable from HTML.

Example:

export default function App() {
    return (
        <div className="App">
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">FAQ</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    );
}

This is a simple navbar with four menu items. You can check out how it looks by visiting this live demo.

In this example, we have a <nav> HTML element, which helped us to make navigation in React. We also have an unordered list and list items that represent each menu item.

Technically, it could be a regular <div> container with <span> menu items, but this is the widespread approach to creating navigation menus.

The rest of the work needs to be done in CSS. You will use the position property in CSS and the top property to make your navbar aligned to the top.

To be specific, you should add the following rules to your stylesheet:

nav {
    position: sticky;
    top: 0;
}

CSS’s position property allows us to specify how a particular element will be positioned on the screen. You can learn more on the official MDN docs.

To make the <ul> element look like a navbar, you should also remove the dots from list items and make them stack horizontally. You can also style other navbar elements, such as background, width, and height.