```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height:"300px" }}>
<Dropdown
items={items}
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height:"300px" }}>
<Dropdown
items={items}
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
Размер  `Dropdown`  задается с помощью свойства  `size` . 
Возможные значения свойства:  `"l"` ,  `"m"` ,  `"s"`  или  `"xs"` .
```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
<Dropdown
items={items}
size="l"
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="m" // default
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="s"
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="xs"
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height:"300px" }}>
<Dropdown
items={items}
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
Размер  `Dropdown`  задается с помощью свойства  `size` . 
Возможные значения свойства:  `"l"` ,  `"m"` ,  `"s"`  или  `"xs"` . ```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
<Dropdown
items={items}
size="l"
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="m" // default
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="s"
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="xs"
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
Параметр  `placement`  может принимать следующие значения :  `"top"` ,   `"right"` ,  `"bottom"` ,  `"left"` ,  `"auto"` . 
Default value для placement -  `"bottom"` .
```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
<Dropdown
items={items}
>
<Button text="Default (bottom)" />
</Dropdown>
<Dropdown
items={items}
placement="right"
>
<Button text="Right" />
</Dropdown>
<Dropdown
items={items}
placement="left"
>
<Button text="Left" />
</Dropdown>
<Dropdown
items={items}
placement="top"
>
<Button text="Top" />
</Dropdown>
<Dropdown
items={items}
placement="auto"
>
<Button text="Auto" />
</Dropdown>
</div>
);
}
```
```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height:"300px" }}>
<Dropdown
items={items}
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
Размер  `Dropdown`  задается с помощью свойства  `size` . 
Возможные значения свойства:  `"l"` ,  `"m"` ,  `"s"`  или  `"xs"` . ```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
<Dropdown
items={items}
size="l"
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="m" // default
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="s"
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="xs"
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
Параметр  `placement`  может принимать следующие значения :  `"top"` ,   `"right"` ,  `"bottom"` ,  `"left"` ,  `"auto"` . 
Default value для placement -  `"bottom"` . ```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
<Dropdown
items={items}
>
<Button text="Default (bottom)" />
</Dropdown>
<Dropdown
items={items}
placement="right"
>
<Button text="Right" />
</Dropdown>
<Dropdown
items={items}
placement="left"
>
<Button text="Left" />
</Dropdown>
<Dropdown
items={items}
placement="top"
>
<Button text="Top" />
</Dropdown>
<Dropdown
items={items}
placement="auto"
>
<Button text="Auto" />
</Dropdown>
</div>
);
}
```
Параметр  `trigger`  принимает строку:  `"click"`  или  `"hover"` . 
Default value -  `"click"` . 
Для примера показано значение  `"hover"` .
```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height:"300px" }}>
<Dropdown
items={items}
trigger="hover"
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height:"300px" }}>
<Dropdown
items={items}
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
Размер  `Dropdown`  задается с помощью свойства  `size` . 
Возможные значения свойства:  `"l"` ,  `"m"` ,  `"s"`  или  `"xs"` . ```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
<Dropdown
items={items}
size="l"
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="m" // default
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="s"
>
<Button text="Список стран" />
</Dropdown>
<Dropdown
items={items}
size="xs"
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
Параметр  `placement`  может принимать следующие значения :  `"top"` ,   `"right"` ,  `"bottom"` ,  `"left"` ,  `"auto"` . 
Default value для placement -  `"bottom"` . ```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height: "300px", display: "flex", gap: "50px" }}>
<Dropdown
items={items}
>
<Button text="Default (bottom)" />
</Dropdown>
<Dropdown
items={items}
placement="right"
>
<Button text="Right" />
</Dropdown>
<Dropdown
items={items}
placement="left"
>
<Button text="Left" />
</Dropdown>
<Dropdown
items={items}
placement="top"
>
<Button text="Top" />
</Dropdown>
<Dropdown
items={items}
placement="auto"
>
<Button text="Auto" />
</Dropdown>
</div>
);
}
```
Параметр  `trigger`  принимает строку:  `"click"`  или  `"hover"` . 
Default value -  `"click"` . 
Для примера показано значение  `"hover"` . ```tsx
import React from 'react';
import { Button, Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
return (
<div style={{ height:"300px" }}>
<Dropdown
items={items}
trigger="hover"
>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```
Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется scroll, и список будет обрезаться, чего хотелось бы избежать. Для такой реализации имеется пропс  `portal` , который принимает либо  `ref`  либо  `id`  html-тега.
```tsx
import React, { useRef } from 'react';
import { Dropdown } from '@salutejs/plasma-web';
export function App() {
const items = [
{
value: 'north_america',
label: 'Северная Америка',
},
{
value: 'south_america',
label: 'Южная Америка',
items: [
{
value: 'brazil',
label: 'Бразилия',
items: [
{
value: 'rio_de_janeiro',
label: 'Рио-де-Жанейро',
},
{
value: 'sao_paulo',
label: 'Сан-Паулу',
},
],
},
{
value: 'argentina',
label: 'Аргентина',
},
],
},
];
const ref = useRef(null)
return (
<div style={{ position: "relative", height: "300px" }} ref={ref}>
<Dropdown items={items} portal={ref}>
<Button text="Список стран" />
</Dropdown>
</div>
);
}
```