How to Create a Responsive Header Component in React JS?

Follow below given steps to crate a responsive menu bar or header component in React JS –

Create a “component” folder in src folder

Create a file “Header.jsx” in component folder

Add Header.jsx component in App.jsx Between BrowserRoter and Routes. Header will show on every page.

Install Flowbite React

Add navbar component in Header.jsx

Add class in navbar and Set Border – border-b-2

In Navbar, we will create three section, left, mid and right.

First we will create left section which is for website logo.

<Link to=’’/”>

<span>Krishan’s<span>

Blog

</Link>

Add tailwind classes in Link –

• Self-center – for center the text
• Whitespace-nowrap – logo text will not be wrap or newline
• text-sm – Text will be small on the mobile phone screen.
• sm:text-xl – text will be large except mobile screen.
• font-semibold – for text bold
• text-white – for white text

Add tailwind classes in span –

• px-2 – for space from left and right
• py-1 -for space from top and bottom
• bg-gradient-to-r from-fuchsia-500 to-cyan-500 – for text color
• text-white – for white text

Create Search bar in header-

After Link tag create form tag

<form>

<TextInput type=”text”  placeholder=”Search…” rightIcon={AiOutlineSearch} className=’hidden lg:inline’/>

</form>

<Button className=’w-12 h-10 lg:hidden’  color=’gray’ pill><AiOutlineSearch/></Button>

Create a dark/light mode icon and Sign in button

<div className=”flex gap-2 md:order-2’>

<Button className=”w-12 h-10 hidden sm:inline  color=’gray’ pill><FaMoon/></Button>

<Link to=’/signin’ > <Button className=” bg-gradient-to-r from-blue-600 to-violet-600”>Sign in</Button></Link>

<Navbar.Toggle/>

</div>

Create Dropdown menu –

<Navbar.Collapse>

<Navbar.Link active={path===”/”} as={‘div’}><Link to=’/’>Home</Link></Navbar.Link>

<Navbar.Link active={path===”/about”} as={‘div’}><Link to=’/about’>About</Link></Navbar.Link>

<Navbar.Link active={path===”/projects”} as={‘div’}><Link to=’/projects’>Projects</Link></Navbar.Link>

</Navbar.Collapse>

For Active menu item –

Import {useLocation} from ‘react-router-dom’

Declare it under header function –

Const path=useLocation().pathname;

Compete Code Header.jsx:-