# Menu items MenuItem

This component 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 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: event and eventKey

          function onSelectAlert(eventKey) {
            alert(`Alert from menu item.\neventKey: ${eventKey}`);

          const MenuItems = (
              <ul className="dropdown-menu open menu-default">
                <MenuItem header>Header</MenuItem>
                <MenuItem divider/>
                <MenuItem header>Header</MenuItem>
                <MenuItem disabled>disabled</MenuItem>
                <MenuItem title="See? I have a title.">
                  link with title
                <MenuItem eventKey={1} href="#someHref" onSelect={onSelectAlert}>
                  link that alerts


# Props

activebooleanHighlight the menu item as active.
bsClassstring'dropdown'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
dividerallfalseStyles the menu item as a horizontal rule, providing visual separation between groups of menu items.
eventKeyanyValue passed to the onSelect handler, useful for identifying the selected menu item.
headerbooleanfalseStyles the menu item as a header label, useful for describing a group of menu items.
noHoverbooleanfalseDisables hover effect on a menu item. Useful if you need to add media content to your menu item that is not clickable.
hrefstringHTML href attribute corresponding to a.href.
idstring|numberHTML id attribute.
onClickfunctionCallback fired when the menu item is clicked.
Callback fired when the menu item is selected.
(eventKey: any, event: Object) => any
targetstringHTML target attribute corresponding to a.target.
titlestringHTML title attribute corresponding to a.title.