Menu with rounded corner

17 Feb 20226 minutes to read

The rounded corner can be achieved by using the cssClass property. Add a custom class to the menu component and customize it using the border-radius CSS property. For more information, refer to the styles specified in the below sample.

CSHTML

<ejs-menu id="menu" items="ViewBag.menuItems" cssClass="e-rounded-menu" showItemOnClick="true"></ejs-menu>

<style>
    body {
        margin-top: 100px;
        text-align: center;
    }

    /* Styles to achieve rounder corner in menu */
    .e-menu-wrapper.e-rounded-menu:not(.e-menu-popup),
    .e-menu-wrapper.e-rounded-menu .e-menu {
        border-radius: 20px;
    }

    /* Increased the menu component left and right padding for better rounded corner UI */
    .e-menu-wrapper.e-rounded-menu ul.e-menu {
        padding: 0 14px;
    }
</style>

Rounded.cs

public ActionResult Rounded()
{
    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= "Toolbars",
              items = new List<object>()
                {
                  new { text= "Menu Bar"},
                  new { text= "Bookmarks Toolbar"}
                }
             },
             new 
             {
                text = "Zoom",
                items =new List<object>() 
                {
                 new { text= "Zoom In"},
                 new { text= "Zoom Out"},
                 new { text= "Reset"}
                }
              },
             new 
             {
               text = "Full Screen",
               items =new List<object>() 
               {
                 new { text= "cancel"}
               }
              },
        }
    });
    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.menuItems = menuItems;
    return View();
}