How to Use

Dropdown

Dropdown presents a list of actions or options triggered by a clickable element. It is a compound component — Dropdown wraps DropdownTrigger (the button/element that opens it) and DropdownMenu (the list of options). Each option is a DropdownItem with onClick, color, and optional icon support. Dropdowns close automatically when an item is selected or when clicking outside. Use them for action menus on table rows, card context menus, and "More" menus in navigation.

import {Dropdown} from "oks-ui"

Actions Menu

The most common pattern: a "Actions" button that opens a menu with Edit, Duplicate, and Delete options. DropdownItem with color="danger" gets a red accent — use it for destructive actions. Each DropdownItem accepts an onClick handler. The dropdown position adjusts to stay within the viewport. Use aria-label on DropdownMenu for screen reader context.

<Dropdown>
  <DropdownTrigger>
    <Button variant="soft">Actions</Button>
  </DropdownTrigger>
  <DropdownMenu aria-label="Row actions">
    <DropdownItem onClick={() => alert("Edit")}>
      <div className="flex items-center gap-2">
        <span>✏</span> Edit
      </div>
    </DropdownItem>
    <DropdownItem onClick={() => alert("Duplicate")}>
      <div className="flex items-center gap-2">
        <span>📋</span> Duplicate
      </div>
    </DropdownItem>
    <DropdownItem onClick={() => alert("Delete")} color="danger">
      <div className="flex items-center gap-2">
        <span>🗑</span> Delete
      </div>
    </DropdownItem>
  </DropdownMenu>
</Dropdown>

Accessibility

Dropdown uses role="menu" for the menu container and role="menuitem" for each DropdownItem. Keyboard navigation is fully supported: Enter/Space to open, Arrow keys to navigate items, Enter to select, Escape to close. aria-expanded on DropdownTrigger reflects menu state. DropdownItem receives focus as you navigate. The menu closes on Escape and on blur. Use aria-label on DropdownMenu to describe the menu's purpose.

Props Reference

All available props for Dropdown. See the full API reference page for interactive playground examples.

Prop	Type	Default	Description
placement	"top" \| "bottom" \| "left" \| "right" \| "top-start" \| ...	`"bottom"`	Dropdown placement relative to trigger.
isOpen	boolean	`—`	Controlled open state.
defaultOpen	boolean	`false`	Default open state.
offset	number	`5`	Offset from trigger.
shouldFlip	boolean	`true`	Flip to keep in viewport.
closeOnSelect	boolean	`true`	Close after item selection.
isDismissable	boolean	`true`	Allow dismiss on outside click/escape.

Best Practices

◆Dropdown is a compound component — always nest DropdownTrigger and DropdownMenu inside Dropdown
◆Use aria-label on DropdownMenu for screen reader accessibility (e.g., "User actions", "Sort options")
◆Items with color="danger" get a red accent — always use this for Delete, Remove, and other destructive actions
◆The dropdown closes automatically when an item is clicked, when clicking outside, or on Escape — no manual close handling needed
◆Add icons to DropdownItem for visual scanning speed — users recognize actions faster with icon+text than text alone
◆For long lists of actions (7+), consider grouping items with dividers or using a separate component pattern

View full API reference for Dropdown →