Navbar
Implement the navigation bar for the whole application.
We'll cover the following...
Let’s begin by implementing the navbar, a fixed component present on all of the application screens to navigate through different routes.
Note: We may refer to the official guide if we need instructions on how to set up Tailwind CSS in React.
Basic navbar
A basic navbar component using React and Tailwind CSS will look something like this:
Press + to interact
// frontend/src/components/Navbar.jsimport React, { useState } from "react";import { Transition } from "@headlessui/react";import logo from "../assets/logo.png";const Navbar = () => {const [isOpen, setIsOpen] = useState(false);return (<div><nav className="bg-gray-800"><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div className="flex items-center justify-between h-16"><div className="flex items-center"><div className="flex-shrink-0"><img className="h-8 w-8" src={logo} alt="Educative" /></div><div className="hidden md:block"><div className="ml-10 flex items-baseline space-x-4"><ahref="#"className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium">Home</a></div></div></div><div className="-mr-2 flex md:hidden"><buttononClick={() => setIsOpen(!isOpen)}type="button"className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"aria-controls="mobile-menu"aria-expanded="false"><span className="sr-only">Open main menu</span>{!isOpen ? (<svgclassName="block h-6 w-6"xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M4 6h16M4 12h16M4 18h16"/></svg>) : (<svgclassName="block h-6 w-6"xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"ariaHidden="true"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M6 18L18 6M6 6l12 12"/></svg>)}</button></div></div></div><Transitionshow={isOpen}enter="transition ease-out duration-100 transform"enterFrom="opacity-0 scale-95"enterTo="opacity-100 scale-100"leave="transition ease-in duration-75 transform"leaveFrom="opacity-100 scale-100"leaveTo="opacity-0 scale-95">{(ref) => (<div className="md:hidden" id="mobile-menu"><div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3"><ahref="#"className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium">Home</a></div></div>)}</Transition></nav></div>);};export default Navbar;
Note that the navbar is very ...