Skip to content

grizzthedj/react-bootstrap-dropdown-menu

Repository files navigation

react-bootstrap-dropdown-menu

npm version

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.

alt tag

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.