---
title: Dropdown
category: General
summary: A compact way of displaying content or actionable items in a popover. Use [Select](/select) for selectable options if needed. Composes [Button](/button) and [Popover](/popover) components.
---
### Items
```jsx live
render(
console.log('edit folder')}>
Edit Folder
console.log('add folder')}>
Add Folder
)
```
### Links
```jsx live
render(
Planning Center
React Docs
)
```
### Custom children
```jsx live
render(() => {
const [previous, setPrevious] = React.useState(0)
const [future, setFuture] = React.useState(4)
return (
Past plans to load
setPrevious(value)}
/>
Future plans to load
setFuture(value)}
/>
)
})
```
### Fetch data on open
```jsx live
render(() => {
const [loading, setLoading] = React.useState(false)
return (
{
setLoading(true)
setTimeout(() => {
setLoading(false)
}, 2000)
}}
onSelect={(value) => console.log(`Item "${value}" selected`)}
>
{loading
? null
: [1, 2, 3].map((value) => (
Item {value}
))}
)
})
```
### No arrow and text truncation
```jsx live
render(
Supercalifragilisticexpialidocious}
variant="outline"
>
Item 1
Item 2
Item 3
)
```
### Custom Trigger
```jsx live
function GuitarIcon({ fill }) {
return (
)
}
const colors = [
'#714dd8',
'#3c8bf7',
'#72bb52',
'#ff6767',
'#ffa833',
'#000000',
]
render(() => {
const [activeColor, setActiveColor] = React.useState('#000000')
return (
Guitar
}
title="Drums"
popoverProps={{
paddingHorizontal: 1,
paddingVertical: 1,
}}
>
{colors.map((color, index) => (
setActiveColor(color)}
/>
))}
)
})
```