Search results

Change orientation in ASP.NET MVC Menu Bar control

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