Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,010,696 members, 7,358,806 topics. Date: Wednesday, 22 March 2023 at 01:36 PM

Create A Dropdown Menu Using Reactjs - Jobs/Vacancies - Nairaland

Nairaland Forum / Nairaland / General / Jobs/Vacancies / Create A Dropdown Menu Using Reactjs (239 Views)

Reactjs Developer / Reactjs Developer Needed Urgently (remote) / Npower: Payroll Sub Menu Appears On Dashboard (2) (3) (4)

(1) (Reply)

Create A Dropdown Menu Using Reactjs by skptricks: 11:46am On Jun 05, 2018
[url=]Crhttps://www.skptricks.com/2018/05/create-dropdown-using-reactjs.htmlate A Dropdown Menu Using ReactJS[/url]


Today, In this tutorial we are are going to discuss how to create simple drop down menu in ReactJS and we have tried our best to make this tutorial as simple as possible. Here we are going to design CSS Dropdown menu with the help of ReactJS and also with the help of onClick Event, we are showing and hiding the drop down menu content.

Dropdown Examples with ReactJS

React dropdown menu tutorial
Lets see the below source code, which help you to build more understanding:

Project Structure :
Lets see the project structure :
Create a Dropdown Menu in ReactJS

This is a Dropdown component class, which help us to render the dropdown menu content. When user click on the dropdown menu, then this component class render the updated dropdown menu list in browser.

showDropdownMenu : This method helps to display the dropdown menu content.
hideDropdownMenu : This method helps to hide the dropdown menu content.

import React from 'react';
import './style.css';

class Dropdown extends React.Component {

this.state = {
displayMenu: false,

this.showDropdownMenu = this.showDropdownMenu.bind(this);
this.hideDropdownMenu = this.hideDropdownMenu.bind(this);


showDropdownMenu(event) {
this.setState({ displayMenu: true }, () => {
document.addEventListener('click', this.hideDropdownMenu);

hideDropdownMenu() {
this.setState({ displayMenu: false }, () => {
document.removeEventListener('click', this.hideDropdownMenu);


render() {
return (
<div className="dropdown" style = {{background:"red",width:"200px"}} >
<div className="button" onClick={this.showDropdownMenu}> My Setting </div>

{ this.state.displayMenu ? (
<li><a className="active" href="#Create Page">Create Page</a></li>
<li><a href="#Manage Pages">Manage Pages</a></li>
<li><a href="#Create Ads">Create Ads</a></li>
<li><a href="#Manage Ads">Manage Ads</a></li>
<li><a href="#Activity Logs">Activity Logs</a></li>
<li><a href="#Setting">Setting</a></li>
<li><a href="#Log Out">Log Out</a></li>



export default Dropdown;

This is a style sheet design for the drop-down menu.
.dropdown {
position: relative;
display: inline-block;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: white;
position: absolute;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
li a {
color: #000;
text-decoration: none;
li {
padding: 8px 16px;
border-bottom: 1px solid #e5e5e5;
li:last-child {
border-bottom: none;
li:hover {
background-color: #e5e5e5;
color: white;
background-color:#ff3232 ;
border: 10px solid;
border-color: white transparent transparent transparent;

This is a main component which helps to display the dropdown menu. Here we are appending the dropdowm menu list in div tag whose ID value is "root"
Example :
ReactDOM.render(displayDropdown, document.getElementById('root'));

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Dropdown from './dropdownmenu/Dropdown';

var displayDropdown = (
<div style={{display: 'flex', justifyContent: 'center'}} >
<Dropdown />

ReactDOM.render(displayDropdown, document.getElementById('root'));


Hope you like this simple example for dropdown menu design.

Download Link :

(1) (Reply)

Retail Sales Officer A Leading Real Estate Property Company – Workforce Group / Vacancy: Marketing Officer Needed At Vodacom. / Apply: Multiple Positions Available For Nigerians

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2023 Oluwaseun Osewa. All rights reserved. See How To Advertise. 57
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.