Create a Responsive Navbar using ReactJS

30 Jul, 2021
In this Article, We will create a functioning navigation bar using Reactjs.
Problem statement: Create a navigation bar using reactJS & styled-component
Modules required:
npmcreate-react-appstyled-componentsreact-router-dom
npm
create-react-app
styled-components
react-router-dom
Basic Setup: For creating a react app you have a node installed on your computer, you can check it by typing in your terminal:
node -v
If you don’t please install the latest version.
All set now! You will start a new project using create-react-app so open your terminal and type:
npx create-react-app navigation-bar
Now go to your navigation-bar folder by typing the given command in the terminal:
cd navigation-bar
Install the dependencies required in this project by typing the given command in the terminal:
npm install react-router-dom
npm install --save styled-components
Now create the components folder in src then go to the components folder and create a new folder name Navbar.In Navbar folder create two files index,js and NavbarElements.js.
Create one more folder in src name pages and in pages create files name about.js, annual.js, blogs.js, events.js, index.js, signup.js, team.js
Project Structure: The file structure in the project will look like this:
File pathe: Create index.js file in src/components/Navbar.
Javascript
import React from 'react';import {  Nav,  NavLink,  Bars,  NavMenu,  NavBtn,  NavBtnLink,} from './NavbarElements';  const Navbar = () => {  return (    <>      <Nav>        <Bars />          <NavMenu>          <NavLink to='/about' activeStyle>            About          </NavLink>          <NavLink to='/events' activeStyle>            Events          </NavLink>          <NavLink to='/annual' activeStyle>            Annual Report          </NavLink>          <NavLink to='/team' activeStyle>            Teams          </NavLink>          <NavLink to='/blogs' activeStyle>            Blogs          </NavLink>          <NavLink to='/sign-up' activeStyle>            Sign Up          </NavLink>          {/* Second Nav */}          {/* <NavBtnLink to='/sign-in'>Sign In</NavBtnLink> */}        </NavMenu>        <NavBtn>          <NavBtnLink to='/signin'>Sign In</NavBtnLink>        </NavBtn>      </Nav>    </>  );};  export default Navbar;
File path: Create NavbarElements.js file in src/components/Navbar.
Javascript
import { FaBars } from 'react-icons/fa';import { NavLink as Link } from 'react-router-dom';import styled from 'styled-components';  export const Nav = styled.nav`  background: #63D471;  height: 85px;  display: flex;  justify-content: space-between;  padding: 0.2rem calc((100vw - 1000px) / 2);  z-index: 12;  /* Third Nav */  /* justify-content: flex-start; */`;  export const NavLink = styled(Link)`  color: #808080;  display: flex;  align-items: center;  text-decoration: none;  padding: 0 1rem;  height: 100%;  cursor: pointer;  &.active {    color: #000000;  }`;  export const Bars = styled(FaBars)`  display: none;  color: #808080;  @media screen and (max-width: 768px) {    display: block;    position: absolute;    top: 0;    right: 0;    transform: translate(-100%, 75%);    font-size: 1.8rem;    cursor: pointer;  }`;  export const NavMenu = styled.div`  display: flex;  align-items: center;  margin-right: -24px;  /* Second Nav */  /* margin-right: 24px; */  /* Third Nav */  /* width: 100vw;  white-space: nowrap; */  @media screen and (max-width: 768px) {    display: none;  }`;  export const NavBtn = styled.nav`  display: flex;  align-items: center;  margin-right: 24px;  /* Third Nav */  /* justify-content: flex-end;  width: 100vw; */  @media screen and (max-width: 768px) {    display: none;  }`;  export const NavBtnLink = styled(Link)`  border-radius: 4px;  background: #808080;  padding: 10px 22px;  color: #000000;  outline: none;  border: none;  cursor: pointer;  transition: all 0.2s ease-in-out;  text-decoration: none;  /* Second Nav */  margin-left: 24px;  &:hover {    transition: all 0.2s ease-in-out;    background: #fff;    color: #808080;  }`;
Edit various pages for the navigation bar in the project in src/pages:
Filename about.js:JavascriptJavascriptimport React from 'react';  const About = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>GeeksforGeeks is a Computer Science portal for geeks.</h1>    </div>  );};  export default About;
Filename about.js:
Javascript
import React from 'react';  const About = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>GeeksforGeeks is a Computer Science portal for geeks.</h1>    </div>  );};  export default About;
Filename annual.js:JavascriptJavascriptimport React from 'react';  const AnnualReport = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Annual Report</h1>    </div>  );};  export default AnnualReport;
Filename annual.js:
Javascript
import React from 'react';  const AnnualReport = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Annual Report</h1>    </div>  );};  export default AnnualReport;
Filename blogs.js:JavascriptJavascriptimport React from 'react';  const Blogs = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Welcome to GeeksforGeeks Blogs</h1>    </div>  );};  export default Blogs;
Filename blogs.js:
Javascript
import React from 'react';  const Blogs = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Welcome to GeeksforGeeks Blogs</h1>    </div>  );};  export default Blogs;
Filename events.js:JavascriptJavascriptimport React from 'react';  const Events = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Welcome to GeeksforGeeks Events</h1>    </div>  );};  export default Events;
Filename events.js:
Javascript
import React from 'react';  const Events = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Welcome to GeeksforGeeks Events</h1>    </div>  );};  export default Events;
Filename index.js:JavascriptJavascriptimport React from 'react';  const Home = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Welcome to GeeksforGeeks</h1>    </div>  );};  export default Home;
Filename index.js:
Javascript
import React from 'react';  const Home = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Welcome to GeeksforGeeks</h1>    </div>  );};  export default Home;
Filename signup.js:JavascriptJavascriptimport React from 'react';  const SignUp = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Sign Up</h1>    </div>  );};  export default SignUp;
Filename signup.js:
Javascript
import React from 'react';  const SignUp = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Sign Up</h1>    </div>  );};  export default SignUp;
Filename team.js:JavascriptJavascriptimport React from 'react';  const Teams = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Welcome to GeeksforGeeks Team</h1>    </div>  );};  export default Teams;
Filename team.js:
Javascript
import React from 'react';  const Teams = () => {  return (    <div      style={{        display: 'flex',        justifyContent: 'Right',        alignItems: 'Right',        height: '100vh'      }}    >      <h1>Welcome to GeeksforGeeks Team</h1>    </div>  );};  export default Teams;
Filename src/index.js: file in src.
Javascript
import React from 'react';import ReactDOM from 'react-dom';import App from './App';  ReactDOM.render(  <React.StrictMode>    <App />  </React.StrictMode>,  document.getElementById('root'));
Filename App.js: file in src folder.
Javascript
import React from 'react';import './App.css';import Navbar from './components/Navbar';import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';import Home from './pages';import About from './pages/about';import Events from './pages/events';import AnnualReport from './pages/annual';import Teams from './pages/team';import Blogs from './pages/blogs';import SignUp from './pages/signup';  function App() {  return (    <Router>      <Navbar />      <Switch>        <Route path='/' exact component={Home} />        <Route path='/about' component={About} />        <Route path='/events' component={Events} />        <Route path='/annual' component={AnnualReport} />        <Route path='/team' component={Teams} />        <Route path='/blogs' component={Blogs} />        <Route path='/sign-up' component={SignUp} />      </Switch>    </Router>  );}  export default App;
Save all files and start the server by using the command.
npm start
Output:
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Technical Scripter 2020
CSS
JavaScript
ReactJS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.