How to show active navs in kendo Menu and make it responsive?

[Adarsh]

Hi,

I am trying to create a nav menu using the kendo Menu Component. My requirement is to make this nav menu similar to the dashkit nav menu. There are two major problems that I am currently facing

1. Show Active navs [showing the active url]
2. Make this NavMenu work in both web and mobile versions.

Problem with Making Responsive: In the web version, if we hover on a nav item that has children in the nav menu, it opens a submenu on the right side of that nav item. In the Mobile version, if we click on a nav item that has children, it opens a submenu on the right side same as the web version, but the submenu is outside of the viewable frame.

Showing Active navs: I looked for this in the forum, but unfortunately, I didn't find any proper solution for making the kendo menu nav items active.

DashKit Theme Reference: https://dashkit.goodthemes.co/index.html

Customize Setting:

• Color Scheme: Light Mode
• Navigation Position: SideNav
• SideNav Sizing: Icons
• Navigation Color: Default

Sample Vue Project: https://github.com/iamAdarshh/Kendo-Menu-Responsive

 

[Petar]

Hi Adarsh,

I've tried to start the pined project but the project seems to require pnpm which I don' have installed. 

Based on the available details, here is what I can suggest for the two points that you asked about:

• Menu on mobile - The Menu on the mobile version could be changed with the Native Drawer or Native PanelBar component. Thus it will be easier for the users to select the different submenus. Here you will have to define two versions for the menu - one for desktop and one for mobile. If you insist on the usage of the Wrapper Menu component, you can try something like the approach demonstrated in this StackBlitz example. In it, we are using the direction property of the component which controls the way the Menu items will open. I would recommend using the Native Drawer or PanelBar for your scenario but the choice is yours. 
• Talking about the Active navigation, I would assume that you want to somehow highlight the selected Menu item and keep it different from the others until a new item is selected. Here is a StackBlitz example that demonstrates how we can change the color of the selected Menu item.
  In the example, we are using the select event of the component and the following method that is executed once the event is triggered. 
  

  onSelect(event_data) {
    var the_Selected_Item = event_data.item;
    var the_Selected_Element = $(the_Selected_Item);
    $('.current_page').removeClass('current_page');
    the_Selected_Element.addClass('current_page');
  }

In addition to the above code, we have to define a CSS for the current_page class. 

Please check the above details and let me know if the provided information helps you achieve what you need in your application. If you have additional questions or need furhter assistance with the current ticket, I will be happy to help you.

Regards,
Petar
Progress Telerik

[Adarsh]

Hi Petar, thank you for your response.

For the 1st point, we'll look into it and check whether it is fulfilling our requirements or not.

For the 2nd point, we are not using any wrapper component and our URL patterns do not follow any specific pattern. For eg. Consider a menu item as 'Admin' in the Nav-Menu with 'A', 'B', and 'C' pages as children. So, the URLs are not like Admin/A or Admin/B. In addition to this, there is one disadvantage of using select event, as it will only work when I navigate to any URL using Nav-Menu but if I go directly to some page using URL then it will not work.

[Plamen]

Hi Adarsh,

The best way to have the correct active item in a navigation menu will be to use the this.$route.params or this.$route.name for your logic and add the desired style or class based on it. It will always be in a sync with the currently selected page. In such case I would recommend you to go and check directly the vue router documentation how such  values can be set and retrieved in the Vue application.