This is a migrated thread and some comments may be shown as answers.

Ho can I add router-link to kendo-menu-item?

3 Answers 27 Views
This is a migrated thread and some comments may be shown as answers.
Dmitry
Top achievements
Rank 1
Dmitry asked on 26 Jan 2019, 01:10 PM

There is a an example of menu, but how can I add router-link to menu item?

 

<kendo-menu-item text="Baseball">
<kendo-menu-item text="Top News"></kendo-menu-item>
<kendo-menu-item text="Radio Records"></kendo-menu-item>
</kendo-menu-item>

 

Thank you in advance

3 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 28 Jan 2019, 12:53 PM
Hi Dmitry,

Here is an example with Kendo Menu Vue Wrapper and router-link. The only specific thing is that it should have a specific class applied because it may be lost after click.

Regards,
Plamen
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dmitry
Top achievements
Rank 1
answered on 28 Jan 2019, 05:20 PM

Thank you, Plamen.

I know that way, but I'm more interesting to make it with <kendo-menu-item> tag, as I need drop down menu.

0
Plamen
Telerik team
answered on 29 Jan 2019, 06:48 AM
Hello,

I have updated the example so that it contains subItems - https://codesandbox.io/s/0174ln8rvl. Here is the markup that I used:
<kendo-menu>
  <li>
    <router-link class="k-link k-menu-link" to="/demo-1"
      >DemoOne</router-link
    >
    <ul>
      <li>
        <router-link class="k-link k-menu-link" to="/demo-1"
          >DemoOne</router-link
        >
      </li>
      <li>
        <router-link class="k-link k-menu-link" to="/demo-2"
          >DemoTwo</router-link
        >
      </li>
    </ul>
  </li>
  <li>
    <router-link class="k-link k-menu-link" to="/demo-2"
      >DemoTwo</router-link
    >
    <ul>
      <li>
        <router-link class="k-link k-menu-link" to="/demo-1"
          >DemoOne</router-link
        >
      </li>
      <li>
        <router-link class="k-link k-menu-link" to="/demo-2"
          >DemoTwo</router-link
        >
      </li>
    </ul>
  </li>
</kendo-menu>
<router-view></router-view>


Regards,
Plamen
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Dmitry
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Dmitry
Top achievements
Rank 1
Share this question
or