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
    }
    */
});