Sunday, May 13, 2018

Create a Dropdown Menu using ReactJS

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


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 ? (
          <ul>
         <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>
          </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;
     top:18px;
}


index.js
This is a main javascript file, which helps to display/render the dropdown menu. Here we are appending the dropdown 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 />
      </div>
      );

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

registerServiceWorker();

Hope you like this simple example for dropdown menu design.


Demo :


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



10 comments:

  1. I really love your post. thanks for sharing this and looking forward to seeing more from you.

    ReplyDelete
  2. I really love your post. thanks for sharing this and looking forward to seeing more from you.

    ReplyDelete
    Replies
    1. Thanks, soon we will publish new post related to React and React Native.

      Delete
  3. Hi.. I tried making multi level dropdown using select option.. but doesn't work because it cannot be nested. Any solution for that please? Thanks a lot in advance!

    ReplyDelete
  4. Great work. Question out of curiosity. Can we have one of this maybe called toggleDropDown
    showDropdownMenu(event) {
    event.preventDefault();
    this.setState({ displayMenu: true }, () => {
    document.addEventListener('click', this.hideDropdownMenu);
    });
    }

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

    } That toggles a certain boolean and based on that shows and hides onclick ??
    Something like

    toggleResources(e) {
    e.preventDefault();
    this.setState({
    showResources: !this.state.showResources,
    });
    }

    ReplyDelete
  5. what will happen if there is multiple dropdown menu..?

    ReplyDelete