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: June 24, 2019).
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 Feb 25,2020 09:17 AM UTC Angular - EJ 2 6
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? 

Rémy C
Replied On February 24, 2020 11:46 AM UTC

Hi ! I've tried the solution provided by Silambarasan I but it didn't convince me as it needs a lot of custom JS.

So here is the solution I've come to, using ng-template in order to override menu items. This way you can access Angular's rooter within HTML template which is far lighter than reading and customizing each menu item manually with JS.
Within the ng-template, here's how to use router's methods to check if current item's route is active or not :
<div class="menu-item" [ngClass]="{'menu-is-active': router.isActive(router.parseUrl(menuItem.url), true)}">

You'll find documentation about those methods here : https://angular.io/api/router/Router

Since a css class is added when the menu item is active, you can even add a :hover selector to add more style to menu items.

Regards, Rémy

Saranya Dhayalan [Syncfusion]
Replied On February 25, 2020 09:17 AM UTC

Hi Allyson,  
Thanks for the update 
Yes, we can use routing like these. Thanks for the suggestions. 
Saranya D 


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

Live Chat Icon For mobile
Live Chat Icon