---
title: Dropdown
description: Dropdown presents a list of actions or options in a floating panel triggered by user interaction.
category: Actions
related: [Button, SplitButton, ContextMenu]
commonPatterns: [action-menu, filter-dropdown, navigation-dropdown]
---

Source: https://clickhouse.design/click-ui/dropdown

# Dropdown

Dropdown surfaces a list of contextual actions without navigating away from the current view. It's perfect for action menus, filters, and navigation options.

## Example

## Props

| Prop               | Type                                     | Default value | Description                                                            |
| ------------------ | ---------------------------------------- | ------------- | ---------------------------------------------------------------------- |
| open               | `boolean`                                | `undefined`   | Controlled open state. Use with onOpenChange for controlled dropdowns. |
| defaultOpen        | `boolean`                                | `false`       | Default open state for uncontrolled dropdowns                          |
| side               | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'`    | Side of the trigger element where the dropdown menu should appear      |
| showArrow          | `boolean`                                | `false`       | Whether to display an arrow pointing to the trigger element            |
| disabled (Trigger) | `boolean`                                | `false`       | Whether the dropdown trigger is disabled and cannot be clicked         |

```tsx
import { Dropdown, Button } from '@clickhouse/click-ui'

function MyDropdown() {
return (
  <Dropdown>
    <Dropdown.Trigger>
      <Button type="secondary" label="Open Dropdown" />
    </Dropdown.Trigger>
    <Dropdown.Content side="bottom" showArrow>
      <Dropdown.Item>First action</Dropdown.Item>
      <Dropdown.Item>Second action</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
)
}
```

## Quick start

```tsx
import { Dropdown, Button } from '@clickhouse/click-ui'

function MyDropdown() {
return (
  <Dropdown>
    <Dropdown.Trigger>
      <Button type="secondary" label="Actions" />
    </Dropdown.Trigger>
    <Dropdown.Content side="bottom" showArrow>
      <Dropdown.Item>Edit</Dropdown.Item>
      <Dropdown.Item>Delete</Dropdown.Item>
      <Dropdown.Item>Share</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
)
}
```

## Related components

- **Button**: Commonly used as a dropdown trigger.
- **SplitButton**: Provides similar dropdown functionality with a main action.
- **ContextMenu**: For right-click context menus.

## Common use cases

### Action menu

```tsx
import { Dropdown, Button } from '@clickhouse/click-ui'

function ActionMenu() {
return (
  <Dropdown>
    <Dropdown.Trigger>
      <Button type="secondary" label="Actions" />
    </Dropdown.Trigger>
    <Dropdown.Content side="bottom" showArrow>
      <Dropdown.Item>Edit</Dropdown.Item>
      <Dropdown.Item>Delete</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
)
}
```

### Filter dropdown

```tsx
import { Dropdown, Button } from '@clickhouse/click-ui'

function FilterDropdown() {
return (
  <Dropdown>
    <Dropdown.Trigger>
      <Button type="secondary" label="Filter" />
    </Dropdown.Trigger>
    <Dropdown.Content side="bottom" showArrow>
      <Dropdown.Item>All</Dropdown.Item>
      <Dropdown.Item>Active</Dropdown.Item>
      <Dropdown.Item>Inactive</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown>
)
}
```

### With submenu

```tsx
import { Dropdown, Button } from '@clickhouse/click-ui'

function DropdownWithSubmenu() {
return (
  <Dropdown>
    <Dropdown.Trigger>
      <Button type="secondary" label="More Options" />
    </Dropdown.Trigger>
    <Dropdown.Content side="bottom" showArrow>
      <Dropdown.Item>Option 1</Dropdown.Item>
      <Dropdown.Sub>
        <Dropdown.Trigger sub>More…</Dropdown.Trigger>
        <Dropdown.Content sub side="right">
          <Dropdown.Item>Sub option A</Dropdown.Item>
          <Dropdown.Item>Sub option B</Dropdown.Item>
        </Dropdown.Content>
      </Dropdown.Sub>
    </Dropdown.Content>
  </Dropdown>
)
}
```