Dropdown
Use the KDropdown component to display contextual overlays or menus attached to an element.
Basic Dropdown
Dropdown inside Modal
TypeScript
KButton(@click="isModalOpen = true") Open Modal
KModal(:opened="isModalOpen")
template(#content)
KDatePicker(label="Select Date")Attributes
Configure the KDropdown component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| isOpen (v-model) | boolean | false | Controls the visibility of the dropdown |
| fullWidth | boolean | false | Makes the dropdown span the full width of its reference target |
| anchorEl | HTMLElement | undefined | The element the dropdown should be anchored to |
| direction | 'auto' | 'bottom' | 'top' | 'left' | 'right' | 'auto' | Preferred opening direction. Auto measures viewport space and chooses the best fit. |
| align | 'left' | 'right' | 'top' | 'bottom' | 'left' | Secondary cross-axis alignment relative to the anchor. |
| teleportTo | string | 'body' | CSS selector or portal target for dropdown teleportation. |
Events
Listen to these events emitted by the KDropdown component.
| Name | Payload | Description |
|---|---|---|
| update:isOpen | boolean | Fired when the dropdown is opened or closed (e.g. by clicking outside) |