<div class="context-menu-target" style="width: 200px; height: 100px; background: #fc9;">
    Show large Context Menu.
</div>

<TelerikContextMenu Data="@MenuItems"
                    Selector=".context-menu-target" />

<style>
    .k-animation-container .k-menu-group-md .k-menu-item {
        font-size: var(--kendo-font-size-lg); /* default is --kendo-font-size */
    }

    .k-animation-container .k-menu-group-md .k-menu-link {
        padding-block: var(--kendo-spacing-2); /* default is --kendo-spacing-1 */
        padding-inline: var(--kendo-spacing-4); /* default is --kendo-spacing-2 */
    }

    .k-animation-container .k-menu-group-md .k-menu-expand-arrow {
        margin-inline-end: 0;
    }
</style>

@code {
    private List<ContextMenuItem> MenuItems { get; set; } = new();

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            MenuItems.Add(new ContextMenuItem()
            {
                Text = $"Menu Item {i}",
                Icon = SvgIcon.Copy,
                Items = new List<ContextMenuItem>() {
                     new ContextMenuItem()
                     {
                         Text = "Child Menu Item",
                         Icon = SvgIcon.Crop
                     }
                 }
            });
        }
    }

    public class ContextMenuItem
    {
        public string Text { get; set; } = string.Empty;
        public object? Icon { get; set; }
        public bool Separator { get; set; }
        public List<ContextMenuItem>? Items { get; set; }
    }
}