Look and feel in ASP.NET MVC Menu

28 Jan 20225 minutes to read

Essential JavaScript controls feature 12 built-in themes, six flat and gradient effects, and also supports custom skin options for user-defined themes.

12 themes support available for Menu control namely,

  • default-theme
  • flat-azure-dark
  • flat-lime
  • flat-lime-dark
  • flat-saffron
  • flat-saffron-dark
  • gradient-azure
  • gradient-azure-dark
  • gradient-lime
  • gradient-lime-dark
  • gradient-saffron
  • gradient-saffron-dark


Menu control also customizes its appearance using user-defined CSS and custom skin options (colors and backgrounds). To apply custom themes you can use the “CssClass” property. “CssClass” property sets the root class for Menu control theme.

Using this CssClass you can override the existing styles under the theme style sheet. The theme stylesheet applies theme-specific styles like colors and backgrounds. In the following sample the value of “CssClass” property is set as “Purple-dark”. Purple-dark is added as root class to Menu control at the runtime. From this root class you can customize the Menu control theme.

  1. Add the following code in your View page.

     // Add the following code in your CSHTML page.
     <div class="imgframe">
             @Html.EJ().Menu("menu").Items(items =>
                 items.Add().Id("Home").Text("Home").Children(child =>
                         child.Add().Text("About").Children(child1 =>
                 items.Add().Text("Services").Children(child =>
                 items.Add().Id("Contact").Text("Contact Us").Children(child =>
                         child.Add().Text("Contact number");
                 items.Add().Id("Careers").Text("Careers").Children(child =>
                          child.Add().Text("Position").Children(child1 =>
                          child.Add().Text("Apply online");
  2. Add the following code in your style section.

     <style type="text/css" class="cssStyles">
     .Purple-dark .e-menu,.e-menu.e-horizontal .e-list > ul {     
        background: pink;              
     .Purple-dark .e-menu.e-horizontal .e-list > a {    
       color: blue;      

Following screenshot displays the output of the above code.

ASP.NET MVC Menu look and feel

Look and feel of a Menu