MenuContent API

<MenuContent> contains the contents of menu's drop-down. <MenuContent> may contain any valid jsx. See also the <MenuItem> component for organizing your menu's contents. Clicking on any <MenuItem> will automatically close the menu.

Note: Any elements outside <MenuContent> will not be displayed to the user.

Props

Prop Type Required Default Value Description
style object No undefined Set arbitrary styles on the component. Analogous the style prop on primitive React HTML components. Note: This prop is particularly useful since DOM styles are not otherwise transmitted through React portals.

Usage Example

<MenuContent>
	<MenuItem onClick={"yourReactFunction"}>Your menu item</MenuItem>
</MenuContent>

HTML5 mouse events won't work as expected inside of a menu (because of React portals). Finsemble's menuing therefore supports these proxy events: _ portal:mouseDown implements mouseDown _ portal:click implements click _ portal:mouseUp implements mouseUp

Example

window.addEventListener("portal:click", (event) => {
	console.log(event.detail);
	/* {
        mouseEvent: MouseEvent{}
        target: HTMLElement
    }
    */
});