Highlight menu item on sub-menu-item selection

[Sanjay Singh]

Hello,

I have a menu item and within it there are few sub menu items.

For example:

Menu item - course

Sub-menu items - Java, Angular, React etc

On selection on React, course should be highlighted.

Please advise how to achieve this.

Thanks,

Sanjay

[YuvanShankar Arunagiri]

Hi Sanjay,

We have validated your reported query and prepared the sample based on your requirement. In that sample, we have focused the parent menu item, if you select any select sub menu/sub-level menu item the parent menu will focused. Please refer the below code snippet and sample.

[index.html]:

Here you can customization the color also to selected menu parent item using the below CSS.

<style>

  .e-menu-item.e-custom-focused {

    color: initial !important;

    outline: 0 solid rgba(0,0,0,0.12) !important;

    outline-offset: 0 !important;

    background-color: red !important;

  }

  </style>

Sample link:  https://stackblitz.com/edit/angular-5fadms-xqqs5v?file=index.html,app.component.ts

Could you please check the above code and sample and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A