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:

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:

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:

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

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:

npm install styled-components

Next, let's add some styles to our NavBar component. Replace the contents of NavBar.js with the following code:

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:

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

Happy coding!

Thank you,
J-Sandaruwan.
linkedin