# Dropdown Выпадающий многоуровневый список. Props (свойства) для компонента Dropdown: [{"name":"children","type":{"name":"ReactNode"}},{"name":"items","type":{"name":"T[]"}},{"name":"offset","type":{"name":"[number, number]"}},{"name":"onToggle","type":{"name":"((isOpen: boolean, event?: Event | SyntheticEvent<Element, Event>) => void)"}},{"name":"placement","type":{"name":"enum","raw":"DropdownPlacement","value":[{"value":"\"auto\""},{"value":"\"top\""},{"value":"\"bottom\""},{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"variant","type":{"name":"enum","raw":"\"normal\" | \"tight\"","value":[{"value":"\"normal\""},{"value":"\"tight\""}]}},{"name":"zIndex","type":{"name":"ZIndex"}},{"name":"listMaxHeight","type":{"name":"Height<string | number>"}},{"name":"listWidth","type":{"name":"Width<string | number>"}},{"name":"portal","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"renderItem","type":{"name":"((item: T) => ReactNode)"}},{"name":"beforeList","type":{"name":"ReactNode"}},{"name":"afterList","type":{"name":"ReactNode"}},{"name":"listHeight","type":{"name":"Height<string | number>"}},{"name":"listOverflow","type":{"name":"Overflow"}},{"name":"alwaysOpened","type":{"name":"boolean"}},{"name":"itemRole","type":{"name":"string"}},{"name":"onHover","type":{"name":"((index: number, item: T) => void)"}},{"name":"onItemSelect","type":{"name":"((item: T, event: SyntheticEvent<Element, Event>) => void)"}},{"name":"trigger","type":{"name":"enum","raw":"DropdownTrigger","value":[{"value":"\"hover\""},{"value":"\"click\""}]}},{"name":"openByRightClick","type":{"name":"boolean"}},{"name":"hasArrow","type":{"name":"boolean"}},{"name":"closeOnSelect","type":{"name":"boolean"}},{"name":"closeOnOverlayClick","type":{"name":"boolean"}},{"name":"onItemClick","type":{"name":"((item: T, event: SyntheticEvent<Element, Event>) => void)"}},{"name":"hoverIndex","type":{"name":"number"}},{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\" | \"xl\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""},{"value":"\"xl\""}]}}] ## Использование Обязательным параметром является только массив  `items` .
Внутри items может быть такой же вложенный массив items. Формат следующий: ```tsx
type Items = Array<{
/**
*  Значение у item
*/
value: string | number;
/**
* Метка-подпись к item
*/
label: string;
/**
* Сторона открытия вложенного дропдауна относительно текущего элемента;
*/
placement?: DropdownPlacement;
/**
* Список дочерних items.
*/
items?: Items;
/**
* Item не активен
*/
disabled?: boolean;
/**
* Слот для контента слева
*/
contentLeft?: ReactNode;
/**
* Слот для контента справа
*/
contentRight?: ReactNode;
/**
* Отобразить ли разделитель до элемента
*/
dividerBefore?: boolean;
/**
* Отобразить ли разделитель после элемента
*/
dividerAfter?: boolean;
/**
* Выбранный item.
* @deprecated использовать ContentLeft || ContentRight
*/
isActive?: boolean;
/**
* Кастомный цвет текста
* @deprecated
*/
color?: string;
/**
* Item не активен
* @deprecated использовать disabled
*/
isDisabled?: boolean;
}>;
```