DataBinding.cshtml

@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="menu-control">
            <ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
        </div>
    </div>
}

@section Meta{
    <meta name="description" content="This example demonstrates how to bind local data source with Syncfusion ASP.NET Core Menu control." />
}

@section ActionDescription{
    <div id="action-description">
        <p>This sample demonstrates data source binding of the menu. Mouse hover or clicking the menu item displays the sub menu pop-up items.</p>
    </div>
}

@section Description{
    <div id="description">
        <p>
            The menu component loads the data through the <code>items</code> property, where the data can either be structured as hierarchical or self-referential data, i.e. mapped with id and parentId fields.
        </p>
        <p>
            In this demo, the component is bound with the list type data where the parent-child relation is referred by id and parentId mapping fields.
        </p>
        <p>
            More information about menu can be found in this
            <a target="_blank" href="https://ej2.syncfusion.com/aspnetcore/documentation/menu/data-source-binding-and-custom-menu-items/#data-binding">
                data binding
            </a> section.
        </p>
    </div>
}
@*custom code start*@
<style>
    .e-menu-wrapper {
        text-align: center;
    }

    .menu-control {
        margin-top: 45px;
        text-align: center;
    }
</style>
@*custom code end*@