Components

Dropdown

Compound menu component with trigger, menu, items, and sections. Supports selection, icons, keyboard nav, and placement.

import{ Dropdown }from"oks-ui"

12 placementsSelection modesKeyboard navSectionsIcons & shortcuts

Basic

Dropdown with trigger, menu, and items.

Interactive Playground

Controls

placement

defaultOpen

offset

shouldFlip

closeOnSelect

isDismissable

Preview

Generated Code

<Dropdown>
  <DropdownTrigger>
    <Button variant="soft">Open menu</Button>
  </DropdownTrigger>
  <DropdownMenu aria-label="Menu">
    <DropdownItem key="profile">Profile</DropdownItem>
    <DropdownItem key="settings">Settings</DropdownItem>
    <DropdownItem key="logout">Logout</DropdownItem>
  </DropdownMenu>
</Dropdown>

Props

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.

placement"bottom"

Dropdown placement relative to trigger.

isOpen—

boolean

Controlled open state.

defaultOpenfalse

boolean

Default open state.

offset5

number

Offset from trigger.

shouldFliptrue

boolean

Flip to keep in viewport.

closeOnSelecttrue

boolean

Close after item selection.

isDismissabletrue

boolean

Allow dismiss on outside click/escape.