diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index 16afe4d34d..50c7802105 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -29,6 +29,7 @@
* Responsive tests
* Glyphicons
* Customizer
+ * MenuItem
* Miscellaneous
*/
@@ -1127,6 +1128,14 @@ h1[id] {
overflow: auto;
}
+/* MenuItem */
+.bs-example .dropdown-menu.open {
+ position: static;
+ display: block;
+ margin-bottom: 5px;
+ clear: left;
+}
+
/*
* Code snippets
diff --git a/docs/examples/MenuItem.js b/docs/examples/MenuItem.js
new file mode 100644
index 0000000000..ac71bb8dce
--- /dev/null
+++ b/docs/examples/MenuItem.js
@@ -0,0 +1,26 @@
+function onSelectAlert(eventKey, href, target) {
+ alert('Alert from menu item.\neventKey: "' + eventKey + '"\nhref: "' + href + '"');
+}
+
+function preventDefault() {}
+
+const MenuItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+React.render(MenuItems, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index 50d3a6756e..ea408c7037 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -170,6 +170,25 @@ const ComponentsPage = React.createClass({
+ {/* Menu Item */}
+
+
+
This is a component used in other components (see Buttons, Navbars).
+
It supports the basic anchor properties href
, target
, title
.
+
It also supports different properties of the normal Bootstrap MenuItem.
+
+ header
: To add a header label to sections
+ divider
: Adds an horizontal divider between sections
+ disabled
: shows the item as disabled, and prevents the onclick
+ eventKey
: passed to the callback
+ onSelect
: a callback that is called when the user clicks the item.
+
+
The callback is called with the following arguments: eventKey
, href
and target
+
+
+
+
+ {/* Panels */}
Panels Panel, PanelGroup, Accordion
@@ -607,6 +626,7 @@ const ComponentsPage = React.createClass({
getValue()
will not work when used this way.
+
@@ -623,6 +643,7 @@ const ComponentsPage = React.createClass({
Button groups
Button dropdowns
+ Menu Item
Panels
Modals
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index 712023984e..a9dcb3b496 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -96,5 +96,6 @@ export default {
InputSizes: require('fs').readFileSync(__dirname + '/../examples/InputSizes.js', 'utf8'),
InputValidation: require('fs').readFileSync(__dirname + '/../examples/InputValidation.js', 'utf8'),
InputHorizontal: require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'),
- InputWrapper: require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8')
+ InputWrapper: require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8'),
+ MenuItem: require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8')
};
diff --git a/src/MenuItem.js b/src/MenuItem.js
index d5bdce7a89..aa8b7c65b5 100644
--- a/src/MenuItem.js
+++ b/src/MenuItem.js
@@ -10,7 +10,8 @@ const MenuItem = React.createClass({
target: React.PropTypes.string,
onSelect: React.PropTypes.func,
eventKey: React.PropTypes.any,
- active: React.PropTypes.bool
+ active: React.PropTypes.bool,
+ disabled: React.PropTypes.bool
},
getDefaultProps() {
@@ -21,6 +22,10 @@ const MenuItem = React.createClass({
},
handleClick(e) {
+ if (this.props.disabled) {
+ e.preventDefault();
+ return;
+ }
if (this.props.onSelect) {
e.preventDefault();
this.props.onSelect(this.props.eventKey, this.props.href, this.props.target);
@@ -39,7 +44,8 @@ const MenuItem = React.createClass({
let classes = {
'dropdown-header': this.props.header,
'divider': this.props.divider,
- 'active': this.props.active
+ 'active': this.props.active,
+ 'disabled': this.props.disabled
};
let children = null;
diff --git a/test/MenuItemSpec.js b/test/MenuItemSpec.js
index 703a1f63d9..9a8c0a533d 100644
--- a/test/MenuItemSpec.js
+++ b/test/MenuItemSpec.js
@@ -107,4 +107,13 @@ describe('MenuItem', function () {
);
ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
});
+
+ it('Should be `disabled` link', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ );
+ assert.ok(instance.getDOMNode().className.match(/\bdisabled\b/));
+ });
});