Learn how to create two simple responsive side navigation bar and main navbar in ReactJs

Posted Aug 01, 2023

Table of Contents

• Introduction
• Understanding the Basics of React JS
• Setting Up the React Project
• Creating the Side Navigation Bar
• Implementing the Dynamic Navbar
• Integrating the Navigation Bars into the App
• Making the Navigation Responsive
• Conclusion
• FAQs

Introduction

In today's fast-paced digital world, user experience plays a vital role in the success of any web application. A well-designed navigation bar is crucial in guiding users through the content and features of a website. React JS, being a popular JavaScript library, offers powerful tools for creating dynamic and responsive navigation bars.

In this comprehensive guide, we will walk you through the process of creating a simple two responsive side navigation bar and dynamic navbar in React JS. So, let's get started!

Understanding the Basics of React JS

Before we dive into creating the navigation bar, let's have a quick overview of React JS. React JS is a JavaScript library that allows developers to build user interfaces using reusable components. It follows a component-based architecture, making it easy to manage and update different parts of the application independently.

Setting Up the React Project

To begin, make sure you have Node.js and npm (Node Package Manager) installed on your system. Create a new React project using the Create React App tool by running the following command in your terminal:

npx create-react-app responsive-navbar-app
cd responsive-navbar-app
npm start

This will set up a new React project and start a development server, making your application accessible at http://localhost:3000/.

Creating the Side Navigation Bar

Now, let's create the side navigation bar. In React JS, we use components to build different parts of our application. We'll create a new component for the side navigation bar.

1. Create a new file named SideNavbar.js in the src folder of your project.
2. Inside the SideNavbar.js, import the necessary React dependencies:

import React from "react";

3. Define the SideNavbar component and implement the HTML structure for the side navigation bar:

const SideNavbar = () => {
  const [isActive, setIsActive] = useState(false);

  const handleToggle = () => {
    setIsActive(!isActive);
  };

  return (
    <>
      <button onClick={handleToggle}>Hamburger Icon</button>
      <div className={`side-navbar ${isActive && "active"}`}>
        {/* Your navigation links will go here */}
      </div>
    </>
  );
};

export default SideNavbar;

4. Now, let's style the SideNavbar component. Create a new CSS file named SideNavbar.css in the same folder as SideNavbar.js and add the following styles:

.side-navbar {
  background-color: #f0f0f0;
  width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

5. Finally, import the CSS file into the SideNavbar.js:

import "./SideNavbar.css";

Implementing the Dynamic Navbar

Next, let's implement the dynamic navbar that will change its content based on user interactions. We'll use React's state to handle the dynamic behavior.

1. Create a new file named DynamicNavbar.js in the src folder of your project.
2. Inside the DynamicNavbar.js, import the necessary React dependencies:

import React, { useState } from "react";

3. Define the DynamicNavbar component and implement the HTML structure for the dynamic navbar:

const DynamicNavbar = () => {
  const [isActive, setIsActive] = useState(false);

  const handleToggle = () => {
    setIsActive(!isActive);
  };

  return (
    <div className="dynamic-navbar">
      <button onClick={handleToggle}>Toggle Navigation</button>
      {isActive && (
        <div className="nav-links">
          {/* Your navigation links will go here */}
        </div>
      )}
    </div>
  );
};

export default DynamicNavbar;

4. Now, let's style the DynamicNavbar component. Create a new CSS file named DynamicNavbar.css in the same folder as DynamicNavbar.js and add the following styles:

.dynamic-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.nav-links {
  display: flex;
  transition: right 0.3s ease;
}

5. Finally, import the CSS file into the DynamicNavbar.js:

import "./DynamicNavbar.css";

Integrating the Navigation Bars into the App

Now that we have created both the side navigation bar and the dynamic navbar, let's integrate them into our main application.

1. Open the App.js file in the src folder of your project.
2. Import the SideNavbar and DynamicNavbar components:

import SideNavbar from "./SideNavbar";
import DynamicNavbar from "./DynamicNavbar";

3. Add both components inside the App component:

function App() {
  return (
    <div className="App">
      {/* Render these two components based on the screen resolution */}
      <SideNavbar />
      <DynamicNavbar />
      {/* Your main content will go here */}
    </div>
  );
}

Making the Navigation Responsive

To ensure that our navigation bars work well on different devices, we need to make them responsive.

1. Modify the SideNavbar.css and DynamicNavbar.css as follows:

/* SideNavbar.css */
.side-navbar {
  background-color: #f0f0f0;
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -250px;
  transition: left 0.3s ease;
}

.side-navbar.active {
  left: 0;
}

2. Update the handleToggle function in DynamicNavbar.js:

const handleToggle = () => {
  setIsActive(!isActive);
  document.body.classList.toggle("no-scroll", isActive);
};

3. Create a new CSS file named GlobalStyles.css in the src folder and add the following styles:

/* GlobalStyles.css */
.no-scroll {
  overflow: hidden;
}

4. Import the GlobalStyles.css into your index.js file:

import "./GlobalStyles.css";

Now, your navigation bars should smoothly slide in and out when toggled, and the page should be scrollable while the navigation is open.

Conclusion

Congratulations! You have successfully created a simple two responsive side navigation bar and dynamic navbar in React JS. We covered the basics of React JS, set up a new project, created and styled the navigation components, and made the navigation responsive. By implementing these navigation bars, you can greatly enhance user experience and create more interactive web applications.

Remember to continuously test and optimize your navigation bars to ensure the best user experience. Happy coding!

FAQs

How do I create a simple navbar in React?

To create a simple navbar in React, you can use the "navbar" component from popular UI libraries like React-Bootstrap or Material-UI. Simply import the required components and define the structure of your navbar with links and styling.

How do I create a responsive navbar in React?

To create a responsive navbar in React, you can use CSS media queries to adjust the layout and styling based on different screen sizes. You can also use CSS Flexbox or Grid to make the navbar elements responsive and adapt to various devices.

What is the NAV menu in React?

The NAV menu in React refers to the navigation menu, which is a component that provides links or buttons for users to navigate through different sections or pages of a website or web application.

How do I create a simple page in React JS?

To create a simple page in React JS, you need to define a new component and render the necessary HTML elements inside the component's return statement. You can also use React Router to manage multiple pages in your application.

How do I add a simple navigation bar in HTML?

To add a simple navigation bar in HTML, you need to use the <nav> element and define links or buttons inside it. You can use CSS to style the navigation bar according to your design preferences.

How do I create a menu in React?

To create a menu in React, you can use a combination of components and CSS. Define the menu items as components and render them conditionally based on user interactions or state changes.

What is the difference between a navbar and NAV?

The term "navbar" is commonly used to refer to a navigation bar in web development. On the other hand, "NAV" is an HTML5 element that represents the navigation section of a page. Both terms often refer to the same concept, which is the navigation menu.

How do I use navigation in ReactJS?

In ReactJS, you can use React Router, a popular library, to implement navigation between different components or pages. By defining routes and using the Router component, you can easily manage navigation in your React application.

How does navigation work in ReactJS?

Navigation in ReactJS involves defining routes using React Router. When a user clicks on a link or button, the corresponding route is triggered, and the associated component is rendered on the screen, allowing the user to navigate to different parts of the application seamlessly.