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
close icon

Sidebar Menu Demo


I'd like to add a menu control to my web app, but I noticed that the sidebar demo uses a listview for a menu as opposed to the menu control. I am not an expert in layout and control use so it is not obvious to me why this is done (it may be standard practice for all I know or maybe the menu control doesn't work in a sidebar!).

Should I be using a listview or a menu in a sidebar menu?

If menu is ok, are there are pros/cons of using it versus the listview (in a menu scenario)?

And finally, (if menu is ok) is it easy to add a menu control to a sidebar or is there a sample somewhere (I did have a quick look but couldn't find anything)?

Thanks in advance

6 Replies

DL Deepa Loganathan Syncfusion Team December 7, 2018 11:20 AM UTC

Hi Dan,  
Thanks for contacting Syncfusion support.  
We understood your concern about using Menu with Sidebar and we would like to let you know that EJ2 Sidebar can be integrated with any components. 
Query: Listview or Menu? 
Listview is a layout control to render the items as a list with built-in features such as grouping, sorting, templating, nested listview etc., while Menu can be rendered with multilevel sub-menu options. You can choose between Listview and Menu based on your application needs.  
To know more about the features available in Listview and Menu and the UI level differences visually, please check the below demo pages, where we have showcased the features of each components. 
For your convenience, we have prepared a sample with Side bar integrated with Menu control and is available for download under the following link.  
Sample Link:  
Please check the sample and get back to us if you have any further queries.  
Deepa L. 

DA danacon December 7, 2018 12:09 PM UTC

Hi Deepa,

Many thanks for this, the sample especially is very useful!

It looks as though the listview with nesting achieves the same thing as the menu with sub-options so I guess there isn't really much of a difference in functionality in a menu scenario. It will probably come down to which looks better for me!



DA danacon December 7, 2018 03:13 PM UTC

Hi Deepa,

I have another question (on the listview this time) - how do you make each item of the listview a hyperlink/url?

I have read through the help section on this (https://ej2.syncfusion.com/aspnetcore/documentation/listview/how-to/#listview-with-hyper-link-navigation) and I understand about adding the url to the listdata viewbag, but I don't understand what to do with the achor_template (var anchor_template = "<a target='_blank' rel='nofollow' href='${url}'>${name}</a>";) to make it apply to the listview items.


DL Deepa Loganathan Syncfusion Team December 10, 2018 11:32 AM UTC

Hi Dan,

Thanks for the update. 

Essentially when we pass the Datasource to the Listview (without any template) it will simply proceed to render the default Listview with Datasource content. So, in your case, you want to render the Listview with navigation anchor tag. 
To achieve this, you need to utilize the template property to customize the default appearance and add more functionality to the Listview.  
 Listview Template 
var anchor_template = "<a target='_blank' rel='nofollow' rel='nofollow' href='${url}'>${name}</a>"; 
    List<object> listdata = new List<object>(); 
    listdata.Add(new { name = "Google", url = "https://www.google.com" }); 
By using the template with an anchor tag and binding it with a Datasource that contains the hyperlinks to your pages and you can render a Listview with hyperlinks. Please check out the below help page to know more about using templates in Listview to customize the List items as per your application needs. 
There was an issue in the documentation website, so currently it is not showing the view page code snippet (only controller code snippet is showing). We have fixed it internally and will be rolled out in the next release, thanks for your patience until then. 
For now, we have attached the view and controller pages of our application to achieve your requirement. 
Deepa L. 

DA danacon December 10, 2018 03:35 PM UTC

Thanks Deepa, yes it was this bit in the view I was missing:-


Now I have seen this I understand how it is all wired together, many thanks :)

DL Deepa Loganathan Syncfusion Team December 11, 2018 05:43 AM UTC

Hi Dan, 
Most welcome. Please get back to us in case of any further queries. 
Deepa L. 

Live Chat Icon For mobile
Up arrow icon