Create Dropdown Menu using React JS

Introduction

Dropdown menus are essential in web development, helping to organize options and make navigation easier. In this tutorial, we will show you how to create a simple dropdown menu using ReactJS. Whether you're a beginner or looking to improve your ReactJS skills, this guide will walk you through everything from setting up the environment to adding interactivity to your menu.

Why Use Dropdowns in ReactJS?

Dropdown menus enhance user experience by neatly organizing content. ReactJS allows you to build dynamic, reusable components, making it perfect for such elements.

Set Up Environment

Before we start building our dropdown menu, let’s set up our ReactJS environment.

1. Install Node.js and NPM

Make sure you have Node.js and NPM installed. You can download them from the official Node.js website.

node -v
npm -v

These commands will show the installed version of Node.js and NPM on your machine.

2. Create a React App

Once Node.js and NPM are ready, create a new React app by running:

npx create-react-app dropdown-menu
cd dropdown-menu
npm start

This will create a new React project and start the development server.

Step-by-Step Guide to Create Dropdown Menu in ReactJS

1. Create a Dropdown Component

First, create a new component for the dropdown menu. Inside the src folder, create a new file called Dropdown.js.

import React, { useState } from 'react';
import './Dropdown.css'; 

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="dropdown">
      <button className="dropdown-button" onClick={toggleDropdown}>
        Select an option <i className={`fas fa-caret-${isOpen ? 'up' : 'down'}`}></i>
      </button>
      {isOpen && (
        <div className="dropdown-content">
          <a href="#"><i className="fas fa-home"></i> Home</a>
          <a href="#"><i className="fas fa-user"></i> Profile</a>
          <a href="#"><i className="fas fa-cog"></i> Settings</a>
          <a href="#"><i className="fas fa-sign-out-alt"></i> Logout</a>
        </div>
      )}
    </div>
  );
};

export default Dropdown;

2. Add Dropdown Styles

To make the dropdown look good, let’s add some basic styles. Create a new file called Dropdown.css in the src folder.

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    font-family: 'Poppins', sans-serif;
    width: 220px;
    color: #000;
    border: 1px solid #000;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dropdown-button i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.dropdown-button:hover {
    background-color: #000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    color: #fff;
}

.dropdown-content {
    position: absolute;
    top: 105%;
    left: 0;
    background: #fff;
    width: 220px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid #000;
    z-index: 10;
}

.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #ddd;
}

.dropdown-content a i {
    margin-right: 8px;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: #000;
    color: #fff;
}

3. Update App.js

Now, import the dropdown component into your App.js.

import React from 'react';
import './App.css';
import Dropdown from './Dropdown';

function App() {
  return (
    <div className="App">
      <Dropdown />
    </div>
  );
}

export default App;

4. Test Your Dropdown Menu

Run the React app by using the following command:

npm start

Open your browser and navigate to http://localhost:3000/. You should now see a working dropdown menu that toggles open and close when clicked.

Conclusion

Congratulations! You have successfully created a dropdown menu in ReactJS. Dropdowns are a great way to enhance your web app’s navigation and make it more user-friendly. By using ReactJS, we created a reusable component that you can integrate into any project.

This tutorial has shown you how simple it can be to create interactive components with ReactJS. Keep experimenting with the code and add more features to improve your dropdown menu!

Dropdown Menu Live Demo ⟶

Read AlsoCreate a URL Shortening Landing Page using HTML, CSS, and JavaScript

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊