MenuItemWithDrop

How to get MenuItemWithDrop

import { MenuItemWithDrop } from 'fds/components';

Type: Component

A MenuItem variant which adds the ability to open and close a drop. This component only standardizes the behavior of opening and closing the drop, the actual contents can be specified using a render function.

Closing the outer drop or the drop rendered for this menu item is done automatically by any descendant MenuItem or MenuItemWithDrop. If you render anything else inside the drop and want to close the outer drop or the drop rendered for this menu item, use the provided closeOuterDrop callback inside the "props" of this component's renderDrop.

When providing an "onClick" property, the item will split itself in two parts: a clickable part and a part used for opening the drop on hover. Both parts manage their own hover state.

Should be rendered inside a Menu or MenuGroup.

Props

# Name Type Description
1. [icon] String

The name of the icon displayed in the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
null
2. [isDisabled] Boolean

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

  Default value
false
3. [isHovered] Boolean

Whether or not the component is currently hovered.

  Default value
false
4. [isSelected] Boolean

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

  Default value
false
5. [keyBindingLabel] String

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

  Default value
null
6. [label] String

The human readable label displayed in the component.

  Default value
null
7. [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
8. [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
9. [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
10. renderDrop Function

A callback that is called at every render of this component. Expects a valid React component instance of the desired drop and its contents to be returned.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
closeOuterDrop Function

Callback function which closes the outer drop.

  Returns

Type: FDS~ReactNode

Whatever you want to render as a drop, usually atleast a Drop with some content.

11. [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
12. rendererName
  Default value
null
Was this page helpful?