Change orientation in Menu Control
26 Oct 20226 minutes to read
Orientation in menu items can be changed horizontally or vertically using the orientation
property. By default, it is horizontally aligned.
<ejs-menu id="menu" items="ViewBag.menuItems" orientation="Vertical"></ejs-menu>
<style>
body {
margin-top: 100px;
text-align: center;
}
</style>
using Syncfusion.EJ2.Navigations;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace EssentialJS2MvcApplication2.Controllers
{
public class OrientationController : Controller
{
// GET: Orientation
public ActionResult Orientation()
{
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 = "Help"
});
ViewBag.orientation = Syncfusion.EJ2.Navigations.Orientation.Vertical;
ViewBag.menuItems = menuItems;
return View();
}
}
}