Responsive Mobile Navigation With NextJS and TailwindCSS

In this tutorial, we’ll be using Next.js and TailwindCSS to build a responsive global navigation bar for your next project. This tutorial will walk you through the steps to set up your project, create components and add a global navbar in Next.js project using TailwindCSS!

The goal of having a mobile navigation is to make sure that content is always at users’ fingertips as they browse your application regardless of the devices.

Next.js

Next.js is a framework that makes the creation of React apps extremely easy and efficient.

Next.js is an open-source development framework built on top of React.js. It is React based framework which have various functionalities to power up both server-side rendering and generating client side static websites.

Next.js gives you the best developer experience with all the features it present for any production ready apps. Features such as hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching give developers a seamless development experience.

You can learn more about Nextjs and its newest features here.

TailwindCSS

TailwindCSS is a utility-first CSS framework that helps you create responsive layouts and design systems with ease. TailwindCSS is utility-based low level CSS framework intended to ease building web applications much faster and more efficiently. TailwindCSS is so popular nowadays, because it helps build websites without ever leaving your HTML files.

The purpose of this post is to show how easy and intuitive it can be to make a responsive navbar in NextJS with the help of TailwindCSS. So let’s begin. Before we start writing some code, we need to do some initial configuration for tailwind and Nextjs.

Setup and Configuration

To start with, we need to install NextJS with NextCli, using npm or yarn. In our case we prefer to use npm. Start by creating a new Next.js project if you don’t have one set up already. Follow this tutorial for complete installation guide of Nextjs and TailwindCSS project.

Creating Pages

Next, create few pages for the application. We are having home, about, projects and contact page. In the pages folder we are going to create all the pages so we can call them inside the navebar. In addition, create a component called MenuItems.js. Using props we will pass showMenu function and active status.

const MenuItems = ({ showMenu, active }) => {
  return (
    <ul
      className={
        active
          ? "flex-col flex items-center fixed inset-0 left-1/4 uppercase bg-black/40 backdrop-blur-lg gap-8 justify-center p-8 md:hidden"
          : "hidden"
      }
    >
      <Close onClick={showMenu} className="cursor-pointer" />
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/projects">
          <a>Projects</a>
        </Link>
      </li>

      <li>
        <Link href="/about">
          <a>About</a>
        </Link>
      </li>
      <li>
        <Link href="/contact">
          <a>Contact</a>
        </Link>
      </li>
    </ul>
  );
};

Building Our Navbar

Now create a components folder in your root directory, then create all the components in that folder. Create Header.js file inside this folder.

React useState hooks is used identify the current state of the menu bar. By default we let the menu bar for mobile hidden using active state false. We use a function named showMenu to hide and show the menu for respective devices.

function Header() {
  const [active, setActive] = useState(false);

  const showMenu = () => {
    setActive(!active);
  };

Now it is time to install Material-ui icons using npm. To display the menu we are using a clickable button named MenuOutlined icon from material-ui icons. We use onClick property and then call showMenu function inside the MenuOutlined.

<nav>
    <div className="absolute right-6 md:hidden top-6 scale-150">
      <MenuOutlined
        onClick={showMenu}
        className="scale-150 cursor-pointer"
      />
    </div>

    <ul className="hidden md:flex gap-8 p-6 uppercase bg-white/10">
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/">
          <a>Testimonials</a>
        </Link>
      </li>
      <li>
        <Link href="/">
          <a>Information</a>
        </Link>
      </li>

      <li>
        <Link href="/about">
          <a>About</a>
        </Link>
      </li>
      <li>
        <Link href="/contact">
          <a>Contact</a>
        </Link>
      </li>
    </ul>

    <MenuItems showMenu={showMenu} active={active} />
</nav>

Making Navbar Appear on All Pages

Now we have done our navbar. But it is important to use a common navbar in every page of our application. To make it simple we can import navbar in the root level file _app.js.

import "../styles/globals.css";
import Head from "next/head";

import Header from "../components/Header";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Navbar Example</title>
      </Head>
      <Header />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Now you have a working responsive navbar.

You can have full code here. Thanks for reading!