MenuButton

Reference

• The MenuButton component is display combination of button (or anchor) with dropdown menu.

Props

1. anchorComponent

   • Type: ReactNode
   • Description: The component that acts as the anchor for the menu.

2. menuComponent

   • Type: ReactNode
   • Description: The content to display inside the dropdown menu.

3. initialComponent

   • Type: ReactNode
   • Description: The component displayed initially (e.g., a button or icon).

4. style

   • Type: object
   • Default: {}
   • Description: Custom styles for the anchor component.

5. placement

   • Type: string
   • Default: 'bottom'
   • Description: Controls the placement of the menu relative to the anchor (e.g., 'top', 'bottom', 'left', 'right').

Usage Example

function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { MenuButton } = protrakComponents;
    return(
        <MenuButton
            initialComponent={<button>Open Menu</button>}
            anchorComponent={<span>Anchor</span>}
            menuComponent={<div>Menu Content</div>}
            placement="bottom-end"
        />
    );
}

• This renders a button that toggles a dropdown menu with the content "Menu Content" positioned at the bottom-end of the anchor.