MenuItem

How to get MenuItem

import { MenuItem } from 'fds/components';

Type: Component

Visually renders the outer container of a menu item and standardizes things like disabled, hovered and selected states while leaving the actual content arbitrary.

Should be rendered inside a Menu or MenuGroup.

Keyboard behavior:

  • Enter: call the onClick prop when focused/hovered and isDisabled is false.

Props

# Name Type Description
1. [icon] String

The name of the icon displayed in the component.

For more information about the available icon names, check the https://fontawesome.com/v4.7.0/icons/

  Default value
null
2. [iconAfter] String

The name of the icon displayed after the component.

For more information about the available icon names, check the https://fontawesome.com/v4.7.0/icons/

  Default value
null
3. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
4. [isHovered] Boolean

Whether or not the component is currently hovered.

  Default value
false
5. [isSelected] Boolean

Whether or not the component should be rendered in a selected state.

  Default value
false
6. [keyBindingLabel] String

The human readable label indicating a key binding (shortcut) displayed in the component.

  Default value
null
7. [label] String

The human readable label displayed in the component.

  Default value
null
8. [onClick] Function

A callback that is called whenever the component is clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
  Default value
null
9. [onMouseEnter] Function

A callback that is called whenever the pointer is moved over the component. This callback is only fired when the pointer enters the component.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
10. [onMouseLeave] Function

A callback that is called whenever the pointer is moved off the component. This callback is only fired when the pointer leaves the component.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
11. [onRef] Function

A callback that is called whenever a component's ref changes.

Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

For more information about React and "refs", check the React documentation


  Arguments
# Name Type Description
1. domNode HTMLElement

The domNode on which the component placed its ref callback attribute.

  Returns

Type: void

12. [tooltipContent] String | ReactElement

The content of the tooltip that is displayed when hovering over the whole component.

  • string: the textual content of the tooltip

  • ReactElement: a React Element (instance of a React Component, usually created with JSX)

  Default value
null

Related links