To add the Dropdown we have three types of components the main vs-dropdown
that contains the element that makes the vs-dropdown-menu
appear and to add each item within it we have the component vs-dropdown-item
To add an internal link using vue-router you can do them simply by adding the property to as if it were a vue-router link
In case you need an external link or normal html, simply do it with the href property
<!-- to: internal link -->
<vs-dropdown-item to="/myLink">
my Link name
</vs-dropdown-item>
<!-- href: external link-->
<vs-dropdown-item href="/myLink">
my Link name
</vs-dropdown-item>
<div class="demo-alignment">
<vs-dropdown>
<a class="flex items-center" href="#">
Dropdown hover
<i class="material-icons"> expand_more </i>
</a>
<vs-dropdown-menu>
<vs-dropdown-item>
Option 1
</vs-dropdown-item>
<vs-dropdown-item>
Option 2
</vs-dropdown-item>
<vs-dropdown-item divider>
Option 3
</vs-dropdown-item>
</vs-dropdown-menu>
</vs-dropdown>
<vs-dropdown>
<a class="flex items-center" href.prevent>
Dropdown Option Disabled
<i class="material-icons">expand_more</i>
</a>
<vs-dropdown-menu>
<vs-dropdown-item>
Option 1
</vs-dropdown-item>
<vs-dropdown-item disabled>
Option 2
</vs-dropdown-item>
<vs-dropdown-item disabled divider>
Option 3
</vs-dropdown-item>
</vs-dropdown-menu>
</vs-dropdown>
</div>