Menus

<Menu
    strategy="context"
>
    <MenuItem>
        {#snippet leading()}
            <Icon icon="edit" />
        {/snippet}
        {#snippet text()}
            Edit
        {/snippet}
    </MenuItem>
    <MenuItem>
        {#snippet leading()}
            <Icon icon="delete" />
        {/snippet}
        {#snippet text()}
            Delete
        {/snippet}
    </MenuItem>
    <Menu>
        <MenuItem>
            {#snippet leading()}
                <Icon icon="link" />
            {/snippet}
            {#snippet text()}
                Copy link
            {/snippet}
        </MenuItem>
        <MenuItem>
            {#snippet leading()}
                <Icon icon="code" />
            {/snippet}
            {#snippet text()}
                Embed
            {/snippet}
        </MenuItem>
    
        {#snippet trigger({ props })}
            <MenuItem {...props}>
                {#snippet leading()}
                    <Icon icon="share" />
                {/snippet}
                {#snippet text()}
                    Share
                {/snippet}
                {#snippet trailing()}
                    <Icon icon="arrow_right" />
                {/snippet}
            </MenuItem>
        {/snippet}
    </Menu>
    {#snippet trigger({ props })}
        <Button {...props}>
            I have a context menu
        </Button>
    {/snippet}
</Menu>