Search results

Multilevel nesting

The Multiple level nesting supports in Context Menu. It can be achieved by mapping the Items property inside the parent MenuItem. In the below sample, three level nesting of Context Menu is provided.

@using Syncfusion.Blazor.Navigations

<div id="target">Right click/Touch hold to open the Context Menu </div>
<SfContextMenu Target="#target" Items="@MenuItems"></SfContextMenu>

@code {
public List<MenuItem> MenuItems = new List<MenuItem>
{
    new MenuItem { Text = "Show All Bookmarks" },
    new MenuItem { Text = "Bookmarks Toolbar", Items = new List<MenuItem>{
    new MenuItem { Text = "Most Visited", Items = new List<MenuItem>{
    new MenuItem { Text = "Google"},
    new MenuItem { Text = "Gmail"} }
    } } },
    new MenuItem { Text = "Recently Added" }
    };
}

<style>
    #target {
        border: 1px dashed;
        height: 150px;
        padding: 10px;
        position: relative;
        text-align: justify;
        color: gray;
        user-select: none;
    }
</style>

Output be like

Context Menu Sample