Search results

Change orientation

Orientation in menu items can be changed horizontally or vertically using the orientation property. By default, it is horizontally aligned.

razor
Orientation.cs
@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();
        }
    }
}