We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to specify url in the Menu control?

Platform: jQuery |
Control: ejMenu
Tags: general

You can provide url to each menu item by using the url property. The url property is defined inside the field object of the jQuery Menu control. To know more about field object and its members, refer to the following link: https://help.syncfusion.com/UG/JS_CR/ejMenu.html#fields

You can see the details in setting the above mentioned url property with data source as follows.

Setting Url for each Menu item

The url property is used to set the URL for the anchor tag, in the <li> tag of Menu item. This url property can receive any value, in string type and the linkAttribute property is used to set the attributes of anchor tag element. It receives the object of the LinkAttribute class, that is, the custom class. Inside LinkAttribute class, you can declare any properties, like target, href, whatever is used as an attribute in the anchor tag.


// Define the Data Source for Menu
var data = [
{ id: "Products", text: "Products", parentId: null },
{ id: "Support", text: "Support", parentId: null },
{ id: "Resources", text: "Resources", parentId: null },
//first level child
{ id: 11, parentId:1, text: "ASP.NET" , url:"http://www.syncfusion.com/products/aspnet",linkAttribute :{target:"_blank"} },
{ id: 12, parentId: "Products", text: "ASP.NET MVC", url:"http://www.syncfusion.com/products/aspnetmvc" },
{ id: 13, parentId: "Products", text: "Silverlight", url:"http://www.syncfusion.com/products/silverlight"},
{ id: 14, parentId: "Products", text: "Windows Forms", url:"http://www.syncfusion.com/products/windows-forms" },
{ id: 15, parentId: "Products", text: "WinRT", url:"http://www.syncfusion.com/products/winrt" },
// Menu Creation
width: 612,
fields: { dataSource: data, id: "id", parentId: "parentId", text: "text",url:"url"}


//setting anchor tag attributes and URL
{ pid = 2, mtext = "Group B", parent = null, URL = "http://www.google.com", linkAttribute = new LinkAttribute() { target = "_blank" } }


@Html.EJ().Menu("menujson").MenuFields(f => f.Datasource((IEnumerable<MenuSample.Models.MenuJson>)ViewBag.datasource).Id("pid").Text("mtext").ParentId("parent").HtmlAttribute("htmlAttribute").LinkAttribute("linkAttribute").Url("URL")

You can refer to the following sample.


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile