Dropdown

<Dropdown>TailwindCSS Modules

Dropdowns reveal a focused list of contextual actions from a button or icon trigger. Combine icons, separators, disabled items, and destructive actions with keyboard navigation and automatic focus management.

InstallationColoxo CLI
npx coloxo add dropdown --style coloxo-css
ES Module ImportPlayground / npm package
import { Dropdown } from '@coloxo/ui';

Design Tokens:

--cx-color-bg-primary--cx-color-border-secondary--cx-radius-lg--cx-shadow-lgmin-width: 12rem

1. Variant Matrix

Use a text button for discoverable actions or an icon button for compact contextual menus. Open each menu to explore its items.

TriggerDefaultWith icons & groupsDisabled
secondary
primary
tertiary
icon-only

2. Control heights

Dropdown triggers inherit the five standard button heights. The menu keeps a consistent item density across all trigger sizes.

Trigger sizes

size="xs"
Height: 32px

Dense tables and inline row actions

size="sm"
Height: 36px

Toolbars and compact action menus

size="md"DEFAULT
Height: 40px

Standard forms and page actions

size="lg"
Height: 44px

Prominent workspace actions

size="xl"
Height: 48px

Large actions and touch targets

3. Menu content & alignment

Group related actions with separators, mark unavailable actions as disabled, and reserve destructive styling for actions that remove data.

Icons, separators & item states

Menu alignment

4. Interactive Props Configurator

Aligns the preview trigger and its open menu.

Visual Render CanvasALIGN: START | SIZE: MD

No action selected

tsx
const items = [  { key: "edit", label: "Edit details", icon: <Pencil size={16} />, onSelect: () => setAction("Edit details") },  { key: "duplicate", label: "Duplicate", icon: <Copy size={16} />, onSelect: () => setAction("Duplicate") },  { key: "download", label: "Download", icon: <Download size={16} />, disabled: true },  { type: "separator", key: "divider" },  { key: "delete", label: "Delete project", icon: <Trash2 size={16} />, destructive: true, onSelect: () => setAction("Delete project") },];<Dropdown  align="start"  className="w-64"  items={items}  trigger={    <Button variant="secondary" size="md" icon={<ChevronDown />} iconPosition="right">      Project actions    </Button>  }/>

5. Dark theme

Dark surfaces use the same menu hierarchy, subdued borders, and highlighted item states. Open a menu to preview its dark appearance.

primary
secondary
tertiary

6. Enterprise layout compositions

Keep secondary actions close to the content they affect, while giving the primary action a clear place in the hierarchy.

Workspace settings

Manage your production workspace.

Coloxo Production

24 members / Enterprise plan

Recent projects

Contextual actions for each project.

Analytics dashboard
Updated today
Customer portal
Updated today
Design system
Updated today

Accessibility

Keyboard navigation

Open the focused trigger with Enter, Space, or Arrow Down. Move through items with the arrow keys; Home and End jump to the first and last item.

Focus management

Escape dismisses the menu and returns focus to its trigger. Disabled items are skipped during keyboard navigation and cannot be selected.

Accessible triggers

Use a Button or IconButton as the trigger so it can receive a ref and keyboard focus. Give icon-only triggers a descriptive aria-label; Radix manages menu roles and expanded state.

Props

NameTypeDefaultDescription
triggerReactNode—Focusable trigger element, such as Button or IconButton. Must accept a ref and forwarded props.
itemsDropdownEntry[]—Menu entries with key, label, optional icon, disabled, destructive, and onSelect. Use type: separator to group actions.
childrenReactNode—Custom menu content, rendered when items is not provided.
align"start" | "center" | "end"startMenu alignment relative to the trigger.
classNamestring—Additional class applied to the portalled menu content.