Skip to content
On this page

Dropdown

The Dropdown component offers a convenient way to display a list of options that can be toggled open or closed with a click. Users can easily select from the dropdown menu, simplifying navigation and interaction.

Overview

HTML
<Dropdown [...props] />
typescript
type UiDropdownGeneric<T = object> = {
  value: string | number;
  label: string;
  icon?: FunctionalComponent<
    HTMLAttributes & VNodeProps,
    Record<string, never>,
    never
  >;
  class?: string;
} & T;

interface DropdownProps {
  modelValue: UiDropdownGeneric<T> | undefined;
  options: UiDropdownGeneric<T>[];
  trackBy?: string;
  label?: string;
  reduce?: (option: UiDropdownGeneric<T>) => unknown;
  buttonClasses?: string;
  listClasses?: string;
  itemClasses?: string;
  disabled?: boolean;
}

Examples

Basic

Icon

Action

Clinux UI - Released under the MIT License.