A Simple Bootstrap Drop-down Menu For React

Category: React React Navigation & Menu | July 17, 2021
Author: grizzthedj
Official Page: Go to website
Last Update: July 17, 2021
License: MIT

react bootstrap drop-down menu

Description:

Create simple and beautiful Bootstrap drop-down menu for your React project. It will work just like a user setting drop-down menu on the top right. The drop-down menu will open on ‘Click’ event.

How to use it?

1. Install the component with npm.

npm install react-bootstrap-dropdown-menu --save

2. Include the Bootstrap library if not included in your project.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="all">

3. Import the component.

import React from 'react';
import { DropdownMenu, MenuItem } from 'react-bootstrap-dropdown-menu';

4. Create the drop-down menu as following.

class SettingsMenu extends React.Component {
  constructor() {
    super();
    this.deleteAccount = this.deleteAccount.bind(this);
    this.logout = this.logout.bind(this);
  }

  deleteAccount(e) {
    console.log("Deleting Account")
  }

  logout(e) {
    console.log("Logging out")
  }

  render() {
    return (
      <DropdownMenu userName="Chris Smith">
        <MenuItem text="Home" location="/home" />
        <MenuItem text="Edit Profile" location="/profile" />
        <MenuItem text="Change Password" location="/change-password" />
        <MenuItem text="Privacy Settings" location="/privacy-settings" />
        <MenuItem text="Delete Account" onClick={this.deleteAccount} />
        <MenuItem text="Logout" onClick={this.logout} />
      </DropdownMenu>
    );
  }
}

export default SettingsMenu;