Dropdown Item

Subcomponent of <VDropdown />. This component is used as dropdown item.

Example

<template>
  <VDropdown>
    <VDropdownItem>Item 1</VDropdownItem>
    <VDropdownItem>Item 2</VDropdownItem>
    <VDropdownItem>Item 3</VDropdownItem>
    <VDropdownItem divider />
    <VDropdownItem>Item 5</VDropdownItem>
    <VDropdownItem>Item 6</VDropdownItem>
  </VDropdown>
</template>

Props

Prop	Type	Default	Description
text	string	undefined	The text to display in the item.
to	string	undefined	The target route for the item when used in a nuxt-link.
href	string	undefined	The target URL for the item when used as a regular a tag.
icon	any	undefined	The icon to display in the item.
iconClass	string	'w-5 h-5'	The class for the icon.
newTab	boolean	undefined	Specifies whether to open the link in a new tab.
divider	boolean	undefined	Specifies whether to display a divider above the item.

Slots

default

The default Vue slot. Used to place text / content.

<template>
  <VDropdown>
    <VDropdownItem>Item 1</VDropdownItem>
    <VDropdownItem>Item 2</VDropdownItem>
    <VDropdownItem>Item 3</VDropdownItem>
  </VDropdown>
</template>

icon

Slot for placing custom icon.

<template>
  <VDropdown>
    <VDropdownItem>Item 1</VDropdownItem>
    <VDropdownItem>
      <template #icon>
        <Icon name="ic:round-home" />
      </template>
      Item 2
    </VDropdownItem>
  </VDropdown>
</template>