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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to specify url in the Menu control?

Platform: JavaScript |
Control: ejMenu |
Published Date: April 14, 2015 |
Last Revised Date: May 7, 2019
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 Menu control. To know more about field object and its members, refer to the following link: http://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.

JavaScript

// 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
$("#syncfusionProducts").ejMenu({
width: 612,
fields: { dataSource: data, id: "id", parentId: "parentId", text: "text",url:"url"}
});

C#

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

CSHTML

@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.

Sample

ADD COMMENT
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.

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