react-bootstrap-dropdown-menu

A simple Dropdown Menu for React. Commonly used as a 'User Settings' menu on websites where users login.

Installation

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

Include bootstrap in your project(if not already included)

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

Usage

A simple example using OnClick events. Download and run the demo for more examples, or browse the examples.

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

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;

DropdownMenu props

| Name | Type | Required | Default | Possible Values | Description | | ------------ | -------- | -------- | ----------------------- | ---------------------------- | --------------- | | userName | String | No | undefined | Any string(e.g. 'John Doe') | When provided, will render 'Logged in as: {userName}' in the top MenuItem | | css | Object | No | See Css below | Object as with attributes as described below | CSS as JS variables to be overridden | position | String | No | right | left, center, right | Changes the menu's horizontal drop position relative to the trigger | | triggerType | String | No | icon | icon, text, image | The Type of drop trigger | | trigger | String | No | glyphicon glyphicon-cog | Depends on triggerType | For 'icon' triggerType: Any bootstrap glyphicon(http://getbootstrap.com/components/)
For 'text' triggerType: Any String can be used
For 'image' triggerType: Path to image(e.g. "/images/myimage.png") | | triggerWidth | String | No | 50px (only applies to triggerType='image') | Any numeric value with 'px' appended(e.g. '45px') | The width to render the image trigger image. | | triggerHeight | String | No | 50px (only applies to triggerType='image') | Any numeric value with 'px' appended(e.g. '45px') | The height to render the image trigger image. | | caratColor | String | No | #000000 (Black) | Any 6 digit hex value (e.g. #F4E3A2) | The color of the DropDown carat (for triggerType 'image' and 'text' only) | iconColor | String | No | #000000 (Black) | Any 6 digit hex value (e.g. #F4E3A2) | The color of the Bootstrap icon | fadeIn | Boolean | No | false | true or false | Dropdown menu will fade in when set to true | onMouseover | Function | No | undefined | A Function | A function that will fire when the mouse pointer hovers over the DropdownMenu trigger |
| onMouseout | Function | No | undefined | A Function | A function that will fire when the mouse pointer moves away from the DropdownMenu trigger |

MenuItem props

| Name | Type | Required | Default | Possible Values | Description | | ------------ | -------- | -------- | ----------------------- | ---------------------------- | --------------- | | type | String | No | undefined | separator | A horizontal rule. text prop is not required when using this type. | | text | String | Yes | undefined | Any String value | Text value of the Link in the MenuItem | | disabled | Boolean | No | false | true or false | Disables a MenuItem | | location | String | No | undefined | Any String value | An absolute or relative path | | linkStyle | Object | No | inherited | Hash containing javascript styles(not CSS). See examples for more info |
| onClick | Function | No | undefined | A Function | A function that will fire when the MenuItem Link is clicked |

Css Override

The following CSS(as JS) can be passed to the DropdownMenu via the css prop to override color, padding etc. NOTE: separator only applies to the child MenuItem component.

const cssAsJs = {
  gear: {
    fontSize: '1.7em',
    cursor: 'pointer',
    color: 'black',
    padding: '14px',
    border: 'none'
  },
  triangle: {
    fontSize: '0.9em',
    cursor: 'pointer',
    color: '#000000',
    padding: '14px',
    border: 'none'
  },
  imageTrigger: {
    height: '50px',
    width: '50px',
    cursor: 'pointer',
    padding: '3px',
    border: 'none'
  },
  textTrigger: {
    cursor: 'pointer',
    padding: '14px',
    border: 'none',
    fontWeight: 'bold'
  },
  menuContent: {
    backgroundColor: '#f9f9f9',
    minWidth: '180px',
    padding: '12px',
    boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)'
  },
  separator: {
    width: '90%',
    borderTop: '1px solid light-grey'
  }
}

Download Examples

git clone https://github.com/grizzthedj/react-bootstrap-dropdown-menu.git
cd react-bootstrap-dropdown-menu
npm install
gulp demo
Browse http://localhost:8080

Backlog

• More Error handling.
• Extend CSS styling so that user defined styles can be passed in as props.