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.

React dropdown menu tutorial

Lets see the below source code, which help you to build more understanding:

Dropdown.js
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 {
constructor(){
super();

this.state = {
       displayMenu: false,
};

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

};

showDropdownMenu(event) {
event.preventDefault();
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 ? (

a className="active" href="#Create Page">Create Page/a>li>
a href="#Manage Pages">Manage Pages/a>li>
a href="#Create Ads">Create Ads/a>li>
a href="#Manage Ads">Manage Ads/a>li>
a href="#Activity Logs">Activity Logs/a>li>
a href="#Setting">Setting/a>li>
a href="#Log Out">Log Out/a>li>
ul>
):
(
null
)
}

div>

);
}
}

export default Dropdown;

style.css 
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;
     top:45px;
     right:0px;
     width: 200px;
     background-color: white;
     font-weight:bold;
     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;
}
.button{
     width:178px;
     height:18px;
     background-color:#ff3232 ;
     padding:12px;
     border-radius:5px;
     font-weight:bold;
     color:white;
}
.button:before{
     content:"";
     position:absolute;
     width:0px;
     height:0px;
     border: 10px solid;
     border-color: white transparent transparent transparent;
     right:6px;
     to

index.js
This is a main component which helps to display the dropdown menu.

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 />
div>
);

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

registerServiceWorker();

Hope you like this simple example for dropdown menu design.



Download Link :
https://github.com/skptricks/react/tree/master/dropdown%20menu%20design%20in%20reactjs