Skip to main content

click

Description​

fires on clicking a menu item or outside the menu

Parameters​

Example​

<script>
    let menu1 = null;

    let message = "";
    function clicked(ev){
        const action = ev.detail.action;
        message = action ? `clicked on ${action.id}` : "closed";
        menu1  = null;
    }
</script>

<div>{message}</div>

<div>
    <Button type="primary" click={ev => menu1 = ev.target}>Click me (bottom menu)</Button>
    {#if menu1}
    <Portal>
        <Menu {options} parent={menu1} on:click={clicked} ></Menu>
    </Portal>
    {/if}
</div>

Details​

You can get an object of the clicked option inside the event as in the above example. The detail property of the CustomEvent (ev.detail) will contain an object related to the clicked menu item. When a user clicks outside the menu, the ev.detail of the generated click event will be null.

Related article: Catching the change of a clicked option