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
Prop | Type | Description |
---|---|---|
menu | Array<IDropdown[]> | A list of dropdown menu items. Each item follows the structure of the IDropdown interface. |
withChevron | Boolean | A boolean to control whether the chevron icon is displayed in the trigger button. |
contentProps | DropdownMenuContentProps | Additional 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>