Represents a menu item in a dropdown

Use in your code Learn more

Represents a menu item in a dropdown.

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 onSelect from firing
  • 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: event and eventKey.

function onSelectAlert(eventKey) {
 alert(`Alert from menu item.\neventKey: ${eventKey}`);
}*
const MenuItems = (
 <Clearfix>
   <ul className="dropdown-menu open">
     <MenuItem header>Header</MenuItem>
     <MenuItem>link</MenuItem>
     <MenuItem divider/>
     <MenuItem header>Header</MenuItem>
     <MenuItem>link</MenuItem>
     <MenuItem disabled>disabled</MenuItem>
     <MenuItem title="See? I have a title.">
       link with title
     </MenuItem>
     <MenuItem eventKey={1} href="#someHref" onSelect={onSelectAlert}>
       link that alerts
     </MenuItem>
   </ul>
 </Clearfix>
);* 
ReactDOM.render(MenuItems, mountNode);

 

props:

NameTypeDescription
activebool

Highlight the menu item as active.

bsClassstring

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component. Default is dropdown.

disabledbool

Disable the menu item, making it unselectable. Default is false.

dividerbool

Styles the menu item as a horizontal rule, providing visual separation between groups of menu items. Default is false.

eventKey*

Value passed to the onSelect handler, useful for identifying the selected menu item.

headerbool

Styles the menu item as a header label, useful for describing a group of menu items. Default is false.

hrefstring

HTML href attribute corresponding to a.href.

onClickfunc

Callback fired when the menu item is clicked.

onSelectfunc

Callback fired when the menu item is selected: (eventKey: *, event: Object) => *.

Test Summary

<MenuItem> renders dividerTests didn't run
<MenuItem> renders divider className and styleTests didn't run
<MenuItem> renders divider not childrenTests didn't run
<MenuItem> renders headerTests didn't run
<MenuItem> renders header className and styleTests didn't run
<MenuItem> renders menu item linkTests didn't run
<MenuItem> click handling with onSelect propTests didn't run
<MenuItem> click handling with onSelect prop (no eventKey)Tests didn't run
<MenuItem> should call custom onClickTests didn't run
<MenuItem> does not fire onSelect when divider is clickedTests didn't run
<MenuItem> does not fire onSelect when header is clickedTests didn't run
<MenuItem> does not pass onClick to DOM nodeTests didn't run
<MenuItem> does not pass onClick to childrenTests didn't run
<MenuItem> disabled linkTests didn't run
<MenuItem> should pass through propsTests didn't run
<MenuItem> Should set target attribute on anchorTests didn't run
<MenuItem> should output an liTests didn't run