DropDown

Easy to implement options that seem only when the user needs them

Default

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

Links

To add an internal link using vue-routeropen in new window you can do them simply by adding the property toopen in new window as if it were a vue-routeropen in new window 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>

Color

You can change the color of the component with the property color

WARNING

Only RGB and HEX colors are supported.

Option Group

If you need to group the options you can use the subcomponent vs-dropdown-group which as a required parameter is vs-label to define the group title

TIP

The group can be hidden from the user and only open when it is sitting on the property with the vs-collapse property

You can modify the icon with a property vs-icon

Custom Content

Sometimes when we need something more personalized and not necessarily a menu for it you can add any content and have the dropdown functionality with the property vs-custom-content

TIP

For better functionality in the user's aspect when doing some interaction with the custom dropdown you can add that it is only activated and deactivated by a click event with the property vs-trigger-click

Button

You can customize the component or element that initialize the dropdown in this case, it is a Button that is the most common

TIP

The component or element that initializes the dropdown is the one inside it with the possibility of total customization and flexibility in the required use

TIP

Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons pageopen in new window. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

<vs-dropdown>
  <!-- element that initializes the dropdown -->

  <vs-dropdown-menu>
    <!-- items and elements within the menu or custom dropdown -->
  </vs-dropdown-menu>
</vs-dropdown>

:::