Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Menu link activate with vuejs


Im having trouble with vue version of metronic 8, I need to activate a menu link dynamically into the code, I was trying to do so with Menucomponent.ts but I can't find into the public api some method to activate the menu item.

Please can you help me, can you illustrate me with one example?

Thx a lot


Text formatting options
Submit

Replies (6)


ok lauris we have done it on every page load, and now it works, thx



Glad to hear that. All the best with your project!



Hi lauris
We are using menu component, that uses router-link elements but what we need is to active some menu item when something happens into the app, it is possible to access to the router-link through typescript?



Hi there
Thank you, but how can we activate the menu-link dynamically? using typescript code.
What we need is to activate the link when something happens into our app.
We achieve this through typescript adding the class active to the menu-link, but when the user clicks on another menu-item, the old item (previously activated through typescript) remains active, It seems like we need to do something more than adding the class "active"

Thx again



Do you use a router-link component or plain HTML <a> link?

If you want to achieve this through typescript you need to update every menu item every time page has been changed.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lorenzo,

If you are using our header or aside menu then it should be implemented by default.
Check out our preview page: https://preview.keenthemes.com/metronic8/vue/demo1/#/dashboard

For active menu items, we are adding an active class to our menu. You can specify this class using a router-link active-class property.

<router-link
class="menu-link"
active-class="active"
to="/your-page-route"
>
your page route
</router-link>


When this router link page will be opened this link will have an active class.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Text formatting options
Submit