Search results

Change orientation in ASP.NET Core Menu Bar control

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

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