highlight active menu item

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 08 May 2022 16:19 by ADMIN

Fabian

Created on: 27 Apr 2022 00:33

Category: KendoReact

Type: Feature Request

highlight active menu item

Hello

I'm using the menu component version 4.13

I'd like to change the style of the active menu item but could not find any examples. Here's one of my menu items

            <MenuItem text="Location Lookup" cssClass={"nav-item nav-link"} data={{ route: "/locations" }}></MenuItem>

i'm following your example to do the routing

function onSelect(event) {
  history.push(event.item.data.route);
}

I'm using react router dom.

Do you have an example for how to change the css of the active menu item?

Thank you.

Fabian

9 comments

ADMIN

Filip

Posted on: 08 May 2022 16:19

Hello, Fabian,

I converted this thread to an official feature request.

Regards, FilipProgress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Fabian

Posted on: 06 May 2022 20:16

Hi Filip

Yes please submit this as an official public feature.

Thank you

Fabian

ADMIN

Filip

Posted on: 06 May 2022 08:05

Hello, Fabian,

This could indeed be added as a feature request, by either making a submission in our feedback forum:

https://feedback.telerik.com/kendo-react-ui

or I can directly convert this to an official public feature request for you.

In regard to your second question, putting the Menu in controlled mode is not currently supported, however, a possible approach would be to trigger a rerender of the component by changing the state.

Regards, FilipProgress Telerik

Fabian

Posted on: 05 May 2022 16:55

Hi Filip

Thanks for the explanation. Could this be added as a feature to the menu?

I think it is a common requirement to set the active parent menu in code based on the route.

As for your suggestion I don't know how to do that but i had another idea.

I can get the textContent and look up the corresponding path in a hash array and then compare t hat to the r oute

However i noticed now the Menu isn't rendered again after the inital render. Is there a way to put the menu into controlled mode so that every time the path changes it is re-rendered?

function setActiveMenu() {
  const path = history.location.pathname;
 
  const menuItems = document.querySelectorAll(".nav-item");
 
  menuItems.forEach((item) => {
    if (path.toLowerCase().includes(menuItems2[item.textContent])) {
      console.log("setting active menu item");
      console.log(item.textContent.toLowerCase());
      item.classList.add("selected-menu-item");
    } else {
      console.log(item.textContent.toLowerCase());
      item.classList.remove("selected-menu-item");
    } // end if
 
  }); // end forEach
} // end setActivemenu

ADMIN

Filip

Posted on: 04 May 2022 10:26

Hi, Fabian,

Thank you for the provided clarification. Currently setting the active class on the menu based on the route is not supported. A possible approach based on the provided code would be to set the data-route attribute manually with a DOM manipulation.

I hope this helps.

Regards, FilipProgress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Fabian

Posted on: 03 May 2022 16:49

Hi Filip

Thank you for this example. It's not quite what i was looking for.

Here's my senario

The user can come into the app using many different urls

e.g.

https://vdt2010.ds.city.vancouver.bc.ca:3000/CAMS/locations

https://vdt2010.ds.city.vancouver.bc.ca:3000/CAMS/todos

So if they come via locations then the locations menu should be active. if they come via todos then todos menu should be active.

i tried this code but the data-route attribute doesn't seem to exist. is there any way i can set the active menu based on the current route?

function setActiveMenu() {
  const path = history.location.pathname;
  const menuItems = document.querySelectorAll(".nav-item");
  console.log(menuItems);
  menuItems.forEach((item) => {
    if (item.getAttribute("data-route") === path) {
      console.log(item);
      console.log(item.ariaLabel);
      console.log(item.textContent);
      item.classList.add("selected-menu-item");
    } else {
      console.log(item);
      console.log(item.ariaLabel);
      console.log(item.textContent);
      item.classList.remove("selected-menu-item");
    } // end if
  }); // end forEach
} // end setActivemenu

Thank you

Fabian

ADMIN

Filip

Posted on: 03 May 2022 06:49

Hi, Fabian,

I am glad to hear that the solution worked. It is possible to achieve this by using the cssClass property and binding it to the active class. I made an example showcasing this approach:

https://stackblitz.com/edit/react-zg2pmx-7yhm6x?file=app/MenuNavContainer.jsx

Then the class has to be reset on the onSelect event.

I hope this helps.

Regards, FilipProgress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Fabian

Posted on: 02 May 2022 15:46

Hi Filip

That worked. However when the app starts I'd like to highlight the menu of the page the user gets to.

Is there a way to set the active menu in code?

Thank you

Fabian

ADMIN

Filip

Posted on: 27 Apr 2022 08:53

Hi, Fabian,

A possible solution would be to use the onSelect event of the Menu and dynamically add and remove a class that will apply the needed styles.

Please have in mind that this will work only for the top-level MenuItems as the other will not be visible.

Here is a demo that showcases this approach:

https://stackblitz.com/edit/react-zg2pmx-ak6yp4?file=app/MenuNavContainer.jsx

I hope this helps.

Regards, FilipProgress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.