get_app Download

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 thevs-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-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>

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 page. 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>

:::

Edit this page

API #

Name Type Parameters Description default
color String Change the color of the dropdown. primary
vs-trigger-click Boolean Determine if the dropdown opens when you click, changing the default functionality. false
divider Boolean Add a top line to split a link from others. false
vs-label String Title of the item group (vs-dropdown-group). Options
vs-custom-content Boolean Determines whether the component will contain custom elements. false
vs-collapse Boolean Determines if the group of options is closed until the user poses in the title (vs-dropdown-group). false
vs-icon String Define the icon show when have a (vs-dropdown-group). keyboard_arrow_right
icon-pack String Icon Pack Class Name Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons

Images keyboard_arrow_right