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

Apply style to "menu selected"

Thread ID:





140629 Oct 29,2018 06:26 PM UTC Nov 4,2018 06:51 AM UTC Angular - EJ 2 4
Tags: Menu
Allyson José
Asked On October 29, 2018 06:26 PM UTC


I need apply style to Menu item selected, but the customization in documentation is only for children menu. 

Attachment: Capturar_797760e1.rar

Silambarasan I [Syncfusion]
Replied On October 30, 2018 10:32 AM UTC

Hi Allyson, 
Thank you for contacting Syncfusion support. 
We have checked your requirement ‘Need to apply style to selected Menu item’ and it can be achievable by overriding selected CSS styles in Menu. Please refer the below sample and code example. 
Stackblitz sample: 
Code Example:
.e-menu-wrapper ul .e-menu-item.e-selected, 
.e-menu-wrapper ul.e-ul .e-menu-item.e-selected { 
  background-color: #0da8c0; 
The above solution is recommended only for item & dataSource binding in Menu. Based on the provided screenshot, we suspect that you are using ‘template’ binding and in that, you can customize styles for the header item & its sub menu items based on your template elements.  
Could you please check the above solution and get back to us with more information If you are using template binding? So, that we can analyze based on that and provide you a better solution. 

Lucas Amaral
Replied On October 30, 2018 03:08 PM UTC


I am with also problem, so I should like to add the following remark: 

By clicking on the menu option, the component reloads the page, thus losing the selected menu of the component.
The route has been set to "URL" of the object.

What I can do ? 



Allyson José
Replied On November 1, 2018 06:40 PM UTC

My problem is that I set the selected route, not the click. How could I apply the style? My model has a boolean flag that informs the active item on the current route. How to tell this to your component?

In addition, I have the same problem as Lucas Amaral, when clicking on the menu, it reloads the application..

Silambarasan I [Syncfusion]
Replied On November 4, 2018 06:51 AM UTC

Hi Allyson, 
Thanks for your update. 
We have checked your requirement and as per our current behavior, we will generated anchor tags inside items when “url” property is added and, while clicking this item - it will reload the page. So, we would like to suggest you to use angular routing while selecting menu items by using ‘select’ event of menu and for maintain the selected state, we have added the ‘e-custom’ class to the selected item. 
Could you please check the above sample and get back to us with more information if we misunderstood your requirement or you need any further assistance on this? 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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