A Simple Bootstrap Drop-down Menu For React

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;

The post A Simple Bootstrap Drop-down Menu For React appeared first on Lipku.com.

Flatlogic Admin Templates banner

1 thought on “A Simple Bootstrap Drop-down Menu For React

Leave a Reply

Your email address will not be published.