Icons and Sub menu items in ASP.NET MVC Menu Bar control

ASP.NET MVC

Search results

08 Apr 2021 / 2 minutes to read

Icons

The menu item contains an icon/image in it to provide a visual representation of an action. To place the icon on a menu item, set the iconCss property with the required icon CSS. By default, the icon is positioned at the left of the menu item. In the following sample, the icons of File and Edit menu items and Open, Save, Cut, Copy,and Paste sub menu items are added using the iconCss property.

razor

Icon.cs

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()

<style>
    /**
    * ej2 Menu styles
    */
    @@font-face {
        font-family: 'em-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .em-icons {
        font-family: 'em-icons';
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
    }

    .e-file::before {
        content: '\e700';
    }

    .e-edit::before {
        content: '\e701';
    }
    .e-menu-wrapper .e-tool::before {
        content: '\e7cf';
    }

    .e-menu-wrapper .e-cut::before {
        content: '\e704';
    }

    .e-menu-wrapper .e-copy::before {
        content: '\e705';
    }

    .e-menu-wrapper .e-paste::before {
        content: '\e706';
    }

    .e-menu-wrapper .e-open::before {
        content: '\e702';
    }

    .e-menu-wrapper .e-save::before {
        content: '\e703';
    }
</style>

// GET: Icons
public ActionResult IconFeatures()
{
    List<object> menuItems = new List<object>();
    menuItems.Add(new
    {
        text = "File",
        iconCss = "em-icons e-file",
        items = new List<object>()
                {
                    new { text = "Open", iconCss= "em-icons e-open" },
                    new { text = "Save", iconCss= "em-icons e-save" },
                    new { separator = true },
                    new { text = "Exit" }
                }
    });
    menuItems.Add(new
    {
        text = "Edit",
        iconCss = "em-icons e-edit",
        items = new List<object>()
                {
                    new { text = "Cut", iconCss= "em-icons e-cut" },
                    new { text = "Copy", iconCss= "em-icons e-copy" },
                    new { text = "Paste", iconCss= "em-icons e-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 = "Go"
    });
    menuItems.Add(new
    {
        text = "Help"
    });

    ViewBag.menuItems = menuItems;
    return View();
}

Navigation in Menu is used to navigate to the other web page when a menu item is clicked. It can be achieved by providing a link to the menu item using the url property. In the following sample, the Navigation URL is added to sub menu items using the url property.

razor

Navigation.cs

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).BeforeItemRender("beforeItemRender").Render()

<script>
function beforeItemRender(args) {
    if (args.item.url) {
        // To open url in blank page.
        args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
    }
}
</script>

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

// Menu Navigation
public ActionResult MenuNavigation()
{
    List<object> menuItems = new List<object>();
    menuItems.Add(new
    {
        text = "Appliances",
        items = new List<object>()
                {
                    new { text= "Washing Machine", url= "https://www.google.com/search?q=washing+machine"},
                    new {text= "Air Conditioners", url= "https://www.google.com/search?q=air+conditioners" }
                }
    });
    menuItems.Add(new
    {
        text = "Mobile",
        items = new List<object>()
                {
                    new { text= "Headphones", url= "https://www.google.com/search?q=headphones" },
                    new { text= "Memory Cards", url= "https://www.google.com/search?q=memory+cards" },
                    new { text= "Power Banks", url= "https://www.google.com/search?q=power+banks" }
                }
    });
    menuItems.Add(new
    {
        text = "Entertainment",
        items = new List<object>()
                {
                    new { text= "Televisions", url= "https://www.google.com/search?q=televisions" },
                    new { text= "Home Theatres", url= "https://www.google.com/search?q=home+theatres" },
                    new { text= "Gaming Laptops", url= "https://www.google.com/search?q=gaming+laptops" }
                }
    });
    menuItems.Add(new
    {
        text = "Fashion",
        url = "https://www.google.com/search?q=fashion"
    });
    menuItems.Add(new
    {
        text = "Offers",
        url = "https://www.google.com/search?q=offers"
    });

    ViewBag.menuItems = menuItems;
    return View();
}

Multilevel nesting

The Menu supports multiple level nesting, and it can be achieved by mapping the items property inside the parent menuItems. In the following sample, three-level nesting of menu has been provided.

razor

Nesting.cs

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()

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

// Menu Multi Level
public ActionResult MultiLevelNesting()
{
    List<object> menuItems = new List<object>();
    menuItems.Add(new
    {
        text = "Fashion",
        items = new List<object>()
        {
            new {
                text = "Men Fashion",
                items = new List<object>()
                {
                    new {
                        text = "Personal Care",
                        items = new List<object>()
                        {
                            new { text = "Trimmers" },
                            new { text = "Shavers" }
                        }
                    },
                    new {
                        text = "Clothing",
                        items = new List<object>()
                        {
                            new { text = "Shirts" },
                            new { text = "Jackets" },
                            new { text = "Track Suits" }
                        }
                    },
                    new { text = "Footwear"}
                }
            },
            new {
                text = "Women Fashion",
                items = new List<object>()
                {
                    new {
                        text = "Clothing",
                        items = new List<object>()
                        {
                            new { text = "Kurtas" },
                            new { text = "Salwars" },
                            new { text = "Sarees" }
                        }
                    },
                    new {
                        text = "Jewellery",
                        items = new List<object>()
                        {
                            new { text = "Nosepins" },
                            new { text = "Anklets" }
                        }
                    }
                }
            }
        }
    });
    menuItems.Add(new
    {
        text = "Home & Living",
        items = new List<object>()
        {
            new {
                text = "Washing Machine",
                items = new List<object>()
                {
                    new { text = "Fully Automatic" },
                    new { text = "Semi Automatic" }
                }
            },
            new {
                text = "Air Conditioners",
                items = new List<object>()
                {
                    new { text = "Inverter ACs" },
                    new { text = "Split ACs" }
                }
            }
        }

    });
    menuItems.Add(new
    {
        text = "Accessories",
    });
    menuItems.Add(new
    {
        text = "Sports",
    });
    menuItems.Add(new
    {
        text = "Gaming",
    });

    ViewBag.menuItems = menuItems;
    return View();
}

You can achieve multi level nesting with data source by mapping name of the child items to the children sub-property of fields property. For more information, refer to the data source binding section.

Icons and Sub menu items in ASP.NET MVC Menu Bar control

Icons

Navigation

Multilevel nesting

See Also