Building a Responsive Navigation Bar with React
Tags: react, html, css, tutorial
Published: 2023-03-15 22:23:20

In this tutorial, we will learn how to create a responsive navigation bar with React that adjusts to different screen sizes. A navigation bar is an essential part of any website, as it helps users navigate through the different pages and sections of the site. With React, we can create a navigation bar that not only looks great but is also highly functional and easy to use.

## Getting Started
To get started, make sure you have a basic understanding of React and its components. If you're new to React, we recommend going through the official React documentation and tutorials before continuing.

## Setting Up the Project
First, let's create a new React project using create-react-app. Open your terminal and run the following command:

```lua
npx create-react-app my-app
```
This will create a new React project in a folder called _**my-app.**_ Next, navigate to the project folder and start the development server:

```bash
cd my-app
npm start
```
This will start the development server at _**http://localhost:3000**_, and you should see the default React app in your browser.

## Creating the Navigation Bar
Next, let's create the navigation bar component. In your project directory, create a new file called _**NavBar.js**_ and add the following code:

```jsx
import React from 'react';

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Services</a></li>
        <li><a href="/">Contact</a></li>
      </ul>
    </nav>
  );
};

export default NavBar;
```
This code defines a functional component that renders a simple unordered list of links. We will style this component later to make it look like a navigation bar.

## Adding NavBar to App.js

```jsx
import React from 'react';
import styled from 'styled-components';
import NavBar from './NavBar';

const AppContainer = styled.div`
  max-width: 1200px;
  margin: 0 auto;
`;

const App = () => {
  return (
    <AppContainer>
      <NavBar />
      {/* Your app content goes here */}
    </AppContainer>
  );
};

export default App;
```
First, we import the _**NavBar**_ component at the top of the file. Then we create a styled component called _**AppContainer**_ that sets the maximum width of the app to 1200 pixels and centers it horizontally using the _**margin: 0 auto**_ style.

Inside the _**App**_ component, we render the _**NavBar**_ component at the top of the app. This will render the navigation bar on every page of your app. Below the _**NavBar**_, you can add your app content, such as routes or page components.

Finally, we export the _**App**_ component so that it can be used in other parts of your app.

## Adding Styling
To style our navigation bar, we will use CSS and the _**styled-components**_ library. If you don't have s_**tyled-components**_ installed, you can install it by running the following command:

```bash
npm install styled-components
```
Next, let's add some styles to our _**NavBar**_ component. Replace the contents of _**NavBar.js**_ with the following code:

```jsx
import React from 'react';
import styled from 'styled-components';

const Nav = styled.nav`
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
`;

const NavItem = styled.li`
  list-style: none;
  margin: 0 1rem;

  a {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;

    &:hover {
      color: #bada55;
    }
  }
`;

const Logo = styled.h1`
  font-size: 1.5rem;
  margin: 0;
`;

const NavBar = () => {
  return (
    <Nav>
      <Logo>My Logo</Logo>
      <ul>
        <NavItem><a href="/">Home</a></NavItem>
        <NavItem><a href="/">About</a></NavItem>
        <NavItem><a href="/">Services</a></NavItem>
        <NavItem><a href="/">Contact</a></NavItem>
      </ul>
    </Nav>
  );
};

export default NavBar;
```
This code defines several styled components that define the styles for our navigation bar. The Nav component sets the main styles for the navigation bar, including the background color, padding, and alignment. The _**NavItem**_ component styles each list item in the navigation bar, including the link styles. The _**Logo**_ component styles the logo in the navigation bar.

## Making the Navigation Bar Responsive
Now that we have our navigation bar styled, let's make it responsive so that it adjusts to different screen sizes. We will use media queries to change the styles of the navigation bar based on the screen size.

Add the following code to the bottom of _**NavBar.js**_:

```jsx
const MobileNavToggle = styled.button`
  display: block;
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    color: #bada55;
  }

  @media (min-width: 768px) {
    display: none;
  }
`;

const DesktopNav = styled.ul`
  display: flex;
  flex-direction: row;

  @media (max-width: 767px) {
    display: none;
  }
`;

const MobileNav = styled.ul`
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 0;

  @media (max-width: 767px) {
    display: flex;
  }
`;

const NavBar = () => {
  const [isMobileNavOpen, setIsMobileNavOpen] = React.useState(false);

  return (
    <Nav>
      <Logo>My Logo</Logo>
      <MobileNavToggle onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}>
        {isMobileNavOpen ? 'Close' : 'Menu'}
      </MobileNavToggle>
      <DesktopNav>
        <NavItem><a href="/">Home</a></NavItem>
        <NavItem><a href="/">About</a></NavItem>
        <NavItem><a href="/">Services</a></NavItem>
        <NavItem><a href="/">Contact</a></NavItem>
      </DesktopNav>
      <MobileNav style={{ display: isMobileNavOpen ? 'flex' : 'none' }}>
        <NavItem><a href="/">Home</a></NavItem>
        <NavItem><a href="/">About</a></NavItem>
        <NavItem><a href="/">Services</a></NavItem>
        <NavItem><a href="/">Contact</a></NavItem>
      </MobileNav>
    </Nav>
  );
};
```
This code defines three additional styled components: _**MobileNavToggle**_, _**DesktopNav**_, and _**MobileNav**_. The _**MobileNavToggle**_ component is a button that toggles the mobile navigation menu on and off. The _**DesktopNav**_ component defines the styles for the navigation bar on desktop screens. The _**MobileNav**_ component defines the styles for the navigation bar on mobile screens.

We also added some state to our _**NavBar**_ component using React's _**useState**_ hook to toggle the mobile navigation menu on and off. The _**MobileNav**_ component is hidden by default using the _**display: none**_ style, and is shown only when the _**isMobileNavOpen**_ state is true.

## Conclusion
In this tutorial, we learned how to create a responsive navigation bar with React that adjusts to different screen sizes. We used styled components and media queries to style and make our navigation bar responsive. With this knowledge, you can create your own navigation bar that looks great on any device.

Example project:-
[navigation-bar-with-react By J-Sandaruwan](https://github.com/J-Sandaruwan/navigation-bar-with-react)

Happy coding!

Thank you,
J-Sandaruwan.
[linkedin](https://www.linkedin.com/in/j-sandaruwan/)