# Dropdown
[component-header:sl-dropdown]
Dropdowns expose additional content that "drops down" in a panel.
Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.
Dropdowns are designed to work well with [menus](/components/menu.md) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker.md) and [select](/components/select.md)). The API gives you complete control over showing, hiding, and positioning the panel.
```html preview
Dropdown
Dropdown Item 1
Dropdown Item 2
Dropdown Item 3
Checked
Disabled
Prefix
Suffix Icon
```
## Examples
### Placement
The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.
```html preview
Edit
Cut
Copy
Paste
Find
Replace
```
### Distance
The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.
```html preview
Edit
Cut
Copy
Paste
Find
Replace
```
### Skidding
The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
```html preview
Edit
Cut
Copy
Paste
Find
Replace
```
[component-metadata:sl-dropdown]