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