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.

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Orientation(ViewBag.orientation).Render()

<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();
        }
    }
}