# antuikit / Dropdown

> Dropdown with the kit's icons, theme-matched dividers and a check on the selected items of a selectable menu.

Docs: https://antuikit.com/docs/components/dropdown

## Install

npx antuikit@latest init
npx antuikit@latest add dropdown

## Import

import { Dropdown } from "@/components/ui/dropdown";

## Demos

- [Basic](https://ui.antuikit.com/embed/dropdown/basic.md): Pass `menu` an `items` array and wrap a trigger, and the menu opens when the pointer rests on it.
- [Items with icons](https://ui.antuikit.com/embed/dropdown/items-with-icons.md): Give each item an `icon` to show a glyph before its label, like edit, copy and download on a row's overflow menu.
- [Groups and dividers](https://ui.antuikit.com/embed/dropdown/groups-and-dividers.md): Set an item's `type` to `"group"` to give a band of items a heading, or to `"divider"` to draw a line between bands.
- [Danger and disabled](https://ui.antuikit.com/embed/dropdown/danger-and-disabled.md): Mark an item `danger` to color it as destructive, or `disabled` to gray it out and ignore its clicks.
- [Keyboard shortcuts](https://ui.antuikit.com/embed/dropdown/keyboard-shortcuts.md): Put a shortcut hint in an item's `extra` to show it muted at the end of the row, like ⌘C next to Copy.
- [Cascading submenus](https://ui.antuikit.com/embed/dropdown/submenu.md): Add `children` to a menu item to open a nested submenu from it.
- [Trigger modes](https://ui.antuikit.com/embed/dropdown/trigger.md): Set `trigger` to `["click"]` or `["contextMenu"]` to open the menu on a click or a right-click instead of the default hover.
- [Placement](https://ui.antuikit.com/embed/dropdown/placement.md): Set `placement` to open the menu above, below or beside its trigger, lined up with its start, center or end.
- [Arrow](https://ui.antuikit.com/embed/dropdown/arrow.md): Set `arrow` to point the menu at its trigger, and `arrow={{ pointAtCenter: true }}` to aim it at the center of a wide one.
- [Disabled](https://ui.antuikit.com/embed/dropdown/disabled.md): Set `disabled` to keep the menu from opening, which also disables the button you pass as the trigger.
- [Click events](https://ui.antuikit.com/embed/dropdown/menu-click.md): Handle `menu.onClick` once for the whole menu and branch on the clicked item's `key`, like duplicate, archive or export.
- [Selectable](https://ui.antuikit.com/embed/dropdown/selectable.md): Set `menu.selectable` with `selectedKeys` to highlight the current choice, like a sort order the trigger also shows.
- [Multi-select](https://ui.antuikit.com/embed/dropdown/multi-select.md): Add `menu.multiple` to `selectable` to toggle several items, and the menu stays open between clicks, like a column picker.
- [Staying open](https://ui.antuikit.com/embed/dropdown/keep-open.md): Control `open` and ignore closes whose `info.source` is `"menu"`, so item clicks leave the menu open until Done.
- [Custom popup content](https://ui.antuikit.com/embed/dropdown/popup-render.md): Return your own node from `popupRender` to show any content in the popup instead of a menu, like a share panel where you invite people, change what each one can do and set who the link opens for.
- [Split button](https://ui.antuikit.com/embed/dropdown/split-button.md): Put a `Button` and a `Dropdown` in `Space.Compact` to build a split button: one main action and a menu of variations.
- [Context menu](https://ui.antuikit.com/embed/dropdown/context-menu.md): Set `trigger` to `["contextMenu"]` to replace the browser menu on an area, and the menu opens at the pointer.
- [Selection actions](https://ui.antuikit.com/embed/dropdown/text-selection.md): Control `open` and pass an empty `trigger` to open a menu under selected text, with actions to copy, highlight or bold it, or turn it into a tag.
- [Team table](https://ui.antuikit.com/embed/dropdown/row-actions.md): A team table with an overflow menu on each row, where removing a member asks for confirmation in a dialog.
- [Account menu](https://ui.antuikit.com/embed/dropdown/user-menu.md): An avatar that opens an account menu, with the user's name and plan in a header above the menu items.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/dropdown`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Dropdown` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.