@empathyco/x-components/docs/API-reference/api/x-components.basedropdown.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseDropdown](./x-components.basedropdown.md)

## BaseDropdown variable

Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents.

**Signature:**

```typescript
_default: import("vue").DefineComponent<{
    items: {
        type: PropType<DropdownItem[]>;
        required: true;
    };
    modelValue: {
        type: PropType<DropdownItem | null>;
        validator: (v: any) => boolean;
        required: true;
    };
    ariaLabel: StringConstructor;
    animation: {
        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
        default: () => import("vue").DefineComponent<{}, {}, any>;
    };
    searchTimeoutMs: {
        type: NumberConstructor;
        default: number;
    };
}, {
    hasToggleSlot: boolean;
    closeAndFocusToggleButton: () => void;
    dropdownCSSClasses: import("vue").ComputedRef<{
        'x-dropdown--is-open': import("vue").Ref<boolean>;
    }>;
    emitSelectedItemChanged: (item: DropdownItem) => void;
    highlightFirstItem: () => void;
    highlightLastItem: () => void;
    highlightNextItem: () => void;
    highlightPreviousItem: () => void;
    highlightedItemIndex: import("vue").Ref<number>;
    isOpen: import("vue").Ref<boolean>;
    itemsButtonRefs: import("vue").Ref<HTMLButtonElement[]>;
    itemsCSSClasses: import("vue").ComputedRef<{
        'x-dropdown__item--is-selected': boolean;
        'x-dropdown__item--is-highlighted': boolean;
    }[]>;
    listId: string;
    open: () => boolean;
    rootRef: import("vue").Ref<HTMLElement | undefined>;
    toggle: () => boolean;
    toggleButtonRef: import("vue").Ref<HTMLButtonElement | undefined>;
    updateSearchBuffer: (event: KeyboardEvent) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    items: {
        type: PropType<DropdownItem[]>;
        required: true;
    };
    modelValue: {
        type: PropType<DropdownItem | null>;
        validator: (v: any) => boolean;
        required: true;
    };
    ariaLabel: StringConstructor;
    animation: {
        type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
        default: () => import("vue").DefineComponent<{}, {}, any>;
    };
    searchTimeoutMs: {
        type: NumberConstructor;
        default: number;
    };
}>> & {
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}, {
    animation: string | Function | Record<string, any>;
    searchTimeoutMs: number;
}, {}>
```