DEV Community

Stephanie Opala
Stephanie Opala

Posted on • Updated on

Simple responsive navigation bar | React.js

In this post, I will take you through steps on how to create a simple navigation bar using React.js and styled components.

-Setting up the React environment

We will use Create React App. Therefore, on your terminal run the following commands.

npm i -g create-react-app
create-react-app folder-name
Write the name of your folder in place of folder-name.
OR
create-react-app .
This will create the react app in your current folder.

- Installing other dependancies required for this project.

npm install react-router-dom
npm install --save styled components
npm install react-icons --save

- Run the web app on your browser

npm start

- Structuring React Components

Create a folder named components in the src folder.
Inside the components folder, create a another folder named Navbar.
Inside the Navbar folder, create two files named index.js and NavbarElements.js.

We will create another folder for the pages.
Go to src folder and create a folder named pages.
Inside pages create the following files.
index.js
about.js
contact.js
signin.js
signup.js

These will be the web pages on our website.

- Creating the navigation bar

Go to components/Navbar/index.js file and create a functional component, Navbar.

index.js

import React from "react";

const Navbar = () => {
    return (
        <>
           <Nav>
            <NavLogo to="/">
                Logo
            </NavLogo>
            <Bars />

            <NavMenu>
                <NavLink to="/">
                    Home
                </NavLink>
                <NavLink to="/about">
                    About
                </NavLink>
                <NavLink to="/contact">
                    Contact
                </NavLink>
                <NavLink to="/signin">
                    Sign In
                </NavLink>
                <NavBtn>
                    <NavBtnLink to="/sign-up">Sign Up</NavBtnLink>                
                </NavBtn>
            </NavMenu> 
           </Nav> 
        </>
    );
};
export default Navbar;
Enter fullscreen mode Exit fullscreen mode

We will use style-components for styling hence the reason why we installed npm install --save styled components as one of our dependancies. Go to NavbarElements.js and write the code below.

NavbarElements.js

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: orangered;
    height: 85px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem calc((100vw - 1000px) / 2);
    z-index: 12;
`;
export const NavLogo = styled(Link)`
  cursor: pointer;
  color: #fff;
  font-size: 2rem;
  text-decoration: none;

`;

export const NavLink = styled(Link)`
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&.active {
  color:black;
}
&:hover {
  color: black;
}
`;

export const Bars = styled(FaBars)`
  display: none;
  color: #fff;
  @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;

  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavBtn = styled.nav`
  display: flex;
  align-items: center;
  margin-right: 24px;

  @media screen and (max-width: 768px) {
    display: none;
  }
`;

export const NavBtnLink = styled(Link)`
  border-radius: 4px;
  background: transparent;
  padding: 10px 22px;
  color: #fff;
  outline: none;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  margin-left: 24px;
  &:hover {
    transition: all 0.2s ease-in-out;
    background: #fff;
    color: #808080;
  }
`;
Enter fullscreen mode Exit fullscreen mode

At the top of NavbarElements.js we are importing FaBars which is an icon from react-icons. We are also importing styled from styled-components and lastly Navlink as Link from react-router-dom.

Go to components\Navbar\index.js and import the following from NavbarElements.js just before the functional component.

index.js

import {
    Nav,
    NavLogo,
    NavLink,
    Bars,
    NavMenu,
    NavBtn,
    NavBtnLink,
} from "./NavbarElements";
Enter fullscreen mode Exit fullscreen mode

- Add content to the pages on our pages folder.

about.js

import React from "react";

const About = () => {
    return (
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh'
            }}
        >
            <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, totam.</h1>
        </div>
    );
};

export default About;
Enter fullscreen mode Exit fullscreen mode

contact.js

import React from 'react'

function Contact() {
    return (
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh'
            }}
        >
           <h1>Contact Us</h1> 
        </div>
    );
};

export default Contact;

Enter fullscreen mode Exit fullscreen mode

index.js

import React from 'react';

const Home = () => {
  return (    
      <h1>Welcome to our website!</h1>
  );
};

export default Home;
Enter fullscreen mode Exit fullscreen mode

signin.js

import React from 'react'

function SignIn() {
    return (
        <div>
            <h1>Sign In</h1>
        </div>
    )
}

export default SignIn;

Enter fullscreen mode Exit fullscreen mode

signup.js

import React from 'react'

function SignUp() {
    return (
        <div>
            <h1>Sign Up and get started</h1>
        </div>
    )
}

export default SignUp;

Enter fullscreen mode Exit fullscreen mode

Lastly, import all the components and pages to App.js.

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 Contact from './pages/contact';
import SignUp from './pages/signup';
import SignIn from './pages/signin';

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/signin" component={SignIn} />
        <Route path="/sign-up" component={SignUp} />
      </Switch>
    </Router>
  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

That is how you can create a navigation bar using React.js and styled components. Happy coding!

Discussion (8)

Collapse
yasarayan profile image
yasar-ayan

Warning: React does not recognize the activeStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase activestyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Collapse
stephanieopala profile image
Stephanie Opala Author

Thanks for the heads up.

Collapse
stephanieopala profile image
Stephanie Opala Author

This issue is resolved.

Collapse
felipebasilio profile image
Felipe Basilio

Where?

Collapse
davidforer profile image
David Forer

Just wanted to say nice tutorial. Definitely added it to my components.

Collapse
stephanieopala profile image
Stephanie Opala Author

Thank you

Collapse
nikhilturale profile image
Nikhil Turale

thanks for this post

Collapse
yusufgitcollab profile image
Harsh Singh

Thank you so much . It was easy to follow