Dropdown is installed into your project as a file you own. It takes the same props as Ant Design v6's Dropdown and adds none. It changes three defaults, and your own value still wins: the submenu arrow comes from your icon pack, so does the overflow icon of the deprecated Dropdown.Button, and menu dividers use the theme's lineWidth like every other divider.
Install
npx antuikit@latest init
npx antuikit@latest add dropdown
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/dropdown, never from antd. The file lives in your project, so the import is a path, not a package.
import { Dropdown } from "@/components/ui/dropdown"
The axes
Dropdown has no variant and no size. Its two enumerated props say where the menu opens and what opens it.
trigger is an array of "click", "hover" and "contextMenu", ["hover"] by default, and the values combine. "contextMenu" replaces the browser's menu and opens at the pointer.
placement takes twelve values. Write top and bottom, since topCenter and bottomCenter are deprecated. The default is bottomLeft, and bottomRight under direction="rtl".
Placement is a preference: with autoAdjustOverflow on by default, the menu flips near a viewport edge.
The deprecated Dropdown.Button has a type that applies to both halves. In a Space.Compact split button, each half is an ordinary Button with its own.
Flags
Five booleans: two for state, one for focus and two for when the menu's contents are in the DOM.
open makes the Dropdown controlled. Pair it with onOpenChange, whose info.source is "trigger" or "menu", to keep the menu open after an item click.
disabled stops the menu opening and disables the trigger too. A child that sets its own disabled={false} keeps that value, so it looks live and opens nothing.
autoFocus moves focus into the menu when it opens. Without it, focus stays on the trigger and Tab is the way in.
destroyOnHidden unmounts the menu's contents while it is closed. It replaces destroyPopupOnHide, which still works and warns.
forceRender renders the contents on mount instead of on first open.
Slots
Your own markup goes in three places.
children is the trigger: one element that accepts a ref and spreads its props. A component that drops ...rest never opens the menu, and a bare string cannot be focused, so pass a real button.
menu describes the contents: the Menu props, with items typed by type and null entries skipped. The v5 overlay prop is gone.
popupRender wraps or replaces the menu. Return the node it gives you inside your own markup to keep the menu's hover and keyboard navigation, or ignore it and style the whole surface yourself. It replaces dropdownRender, which still works and warns.
Inside an item, icon and extra take nodes. Items have no icon by default, and the kit's <Icon> follows your icon pack. extra shows a muted shortcut hint at the end of the row.
Events
onOpenChange
Styling
classNames and styles take the same five keys, one per part. The menu renders in a portal, so they are the way to reach it: className lands on the trigger. The item keys reach submenu items too.
1
<Dropdown
2
classNames={{
3
root: "…",
4
item: "…",
5
itemTitle: "…",
6
itemIcon: "…",
7
itemContent: "…",
8
}}
9
/>
A Tailwind utility on one of these keys wins without !important. A min-w-* on root loses to the width the menu copies from its trigger, so set w-* instead.
API Reference
Dropdown
Dropdown's props. Rows marked antuikit in the Version column are added by the kit.