Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-bootstrap-dropdown-menu
Advanced tools
Readme
A simple Dropdown Menu for React. Commonly used as a 'User Settings' menu on websites where users login.
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">
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;
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 |
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 |
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'
}
}
git clone https://github.com/grizzthedj/react-bootstrap-dropdown-menu.git
cd react-bootstrap-dropdown-menu
npm install
gulp demo
Browse http://localhost:8080
FAQs
A simple Dropdown Menu for React. Commonly used as a user 'Settings' menu on websites where users login.
The npm package react-bootstrap-dropdown-menu receives a total of 184 weekly downloads. As such, react-bootstrap-dropdown-menu popularity was classified as not popular.
We found that react-bootstrap-dropdown-menu demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.