Dropdown

The VDropdown component is a customizable dropdown menu built using shadcn. It supports dynamic menu items, routing, external links, and optional chevron indicators.

Props

PropTypeDescription
menuArray<IDropdown[]>A list of dropdown menu items. Each item follows the structure of the IDropdown interface.
withChevronBooleanA boolean to control whether the chevron icon is displayed in the trigger button.
contentPropsDropdownMenuContentPropsAdditional props to customize the content of the dropdown menu.

Example

vue
<script setup lang="ts">
import VDropdown from 'UiKit/components/VDropdown.vue';
</script>
<VDropdown
  :menu="[
    { text: 'Home', to: '/home' },
    { text: 'About', href: 'https://example.com/about' },
    { text: 'Contact', active: true }
  ]"
  :withChevron="true"
  :contentProps="{ someProp: 'value' }"
>
    Click to open
</VDropdown>
Help Ukraine to stop russian aggression