Getting started with ASP.NET Core Menu Bar control
This section briefly explains about how to create a simple Menu in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part of the system requirements and configure the common specifications.
Add Menu to the project
Add the HTML ejs-menu tag with id attribute as menu to your Index.cshtml file
<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>ViewBag.menuItems variable is used for bounding the items property in view page.
Bind datasource
The menu items can be rendered by assigning JSON values to ViewBag variable in Default.cs, and passed to the
items property in the view.
public IActionResult Index()
{
// Define the array of JSON
List<object> menuItems = new List<object>();
menuItems.Add(new
{
text = "File",
items = new List<object>()
{
new { text = "Open" },
new { text = "Save" },
new { text = "Exit" }
}
});
menuItems.Add(new
{
text = "Edit",
items = new List<object>()
{
new { text = "Cut" },
new { text = "Copy" },
new { text = "Paste" }
}
});
menuItems.Add(new
{
text = "View",
items = new List<object>()
{
new { text = "Toolbar" },
new { text = "Sidebar" },
new { text = "Fullscreen" }
}
});
menuItems.Add(new
{
text = "Tools",
items = new List<object>()
{
new { text = "Spelling & Grammar" },
new { text = "Customize" },
new { text = "Options" }
}
});
menuItems.Add(new
{
text = "Go"
});
menuItems.Add(new
{
text = "Help"
});
ViewBag.menuItems = menuItems;
return View();
}Output be like the below.
Run the application
After successful compilation of your application, simply press F5 to run the application.
The following example shows a basic Menu.
<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>public ActionResult Index()
{
//define the array of JSON
List<object> menuItems = new List<object>();
menuItems.Add(new
{
text = "File",
items = new List<object>()
{
new { text = "Open" },
new { text = "Save" },
new { text = "Exit" }
}
});
menuItems.Add(new
{
text = "Edit",
items = new List<object>()
{
new { text = "Cut" },
new { text = "Copy" },
new { text = "Paste" }
}
});
menuItems.Add(new
{
text = "View",
items = new List<object>()
{
new { text = "Toolbar" },
new { text = "Sidebar" },
new { text = "Fullscreen" }
}
});
menuItems.Add(new
{
text = "Tools",
items = new List<object>()
{
new { text = "Spelling & Grammar" },
new { text = "Customize" },
new { text = "Options" }
}
});
menuItems.Add(new
{
text = "Go"
});
menuItems.Add(new
{
text = "Help"
});
ViewBag.menuItems = menuItems;
return View();
}This example demonstrates the basic rendering of Menu with items support. For more information about data source support, refer to the
Data Source Bindingsection.
Group menu items with separator
The separators are both horizontal and vertical lines used to separate the menu items.
You cannot select the separators, but you can enable separators to group the menu items
using the separator property.
The Open and Save sub menu items are grouped using the separator property in the following sample.
<ejs-menu id="menu" items="ViewBag.menuItems" fields="ViewBag.menuFields"></ejs-menu>The
separatorproperty should not be given along with the other fields in theMenuItem. You can also enable the separator to group horizontal menu items.