Components / Dropdown
Dropdown
Floating dropdown menu with scale+fade entrance/exit animations, staggered item reveal, full keyboard navigation (arrows/home/end/escape), click-outside close, cg-icon integration, keyboard shortcuts, and divider support.
actionsv0.5.0
Playground
Examples
With icons + shortcuts
<cg-dropdown open><cg-button slot="trigger">Edit</cg-button></cg-dropdown>File menu
<cg-dropdown open><cg-button slot="trigger" variant="secondary">File</cg-button></cg-dropdown>Account menu
<cg-dropdown open><cg-button slot="trigger" variant="tertiary">Account</cg-button></cg-dropdown>Overflow (3 dots)
<div style="display:flex;justify-content:flex-end;"><cg-dropdown position="bottom-end" open><cg-button slot="trigger" variant="secondary" size="sm"></cg-button></cg-dropdown></div>Import
import { CgDropdown } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-dropdown';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
position | "bottom-start" | "bottom-end" | "top-start" | "top-end" | "bottom-start" | Menu position relative to trigger |
loading | boolean | false | Show loading spinner instead of items |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius variant |
_trigger | "button-arrow" | "dots-vertical" | "dots-horizontal" | "button-plain" | "button-arrow" | Trigger style (playground only) |
_itemStyle | "with-icons" | "with-shortcuts" | "icons-shortcuts" | "plain" | "icons-shortcuts" | Item display (playground only) |
Events
| Event | Detail | Description |
|---|---|---|
cg-dropdown-open | {} | Menu opened |
cg-dropdown-close | {} | Menu closed |
cg-dropdown-select | {id: string, label: string} | Item selected |