Dropdown Menu
Contextual action menu.
Usage
Wrap your trigger in the child snippet to forward all required ARIA
and positioning props. The menu portals to <body>, is fully
keyboard-navigable, and closes on item select or Esc.
Groups & Labels
Use DropdownMenu.Group with DropdownMenu.Label to section related items. The disabled prop on an item prevents selection
while keeping it visible.
Props
DropdownMenu.Root
| Prop | Type | Default |
|---|---|---|
children bits-ui | Snippet<[]> | undefined | — |
dir bits-ui The direction of the site. | Direction | undefined | "ltr" |
onOpenChange bits-ui A callback that is called when the menu is opened or closed. | OnChangeFn<boolean> | undefined | — |
onOpenChangeComplete bits-ui A callback that is called when the menu is opened or closed. | OnChangeFn<boolean> | undefined | — |
open bits-ui The open state of the menu. | boolean | undefined | — |
DropdownMenu.Trigger
| Prop | Type | Default |
|---|---|---|
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
disabled bits-ui Whether the trigger is disabled. | boolean | null | undefined | false |
id bits-ui | string | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
DropdownMenu.Content
| Prop | Type | Default |
|---|---|---|
class | string | — |
align bits-ui The preferred alignment of the anchor to render against when open. This may change when collisions occur. | "start" | "center" | "end" | undefined | — |
alignOffset bits-ui An offset in pixels from the "start" or "end" alignment options. | number | undefined | — |
arrowPadding bits-ui This describes the padding between the arrow and the edges of the floating element. If your floating element has border-radius, this will prevent it from overflowing the corners. | number | undefined | — |
avoidCollisions bits-ui When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges. | boolean | undefined | true |
child bits-ui | Snippet<[FloatingContentSnippetProps & { props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
collisionBoundary bits-ui A boundary element or array of elements to check for collisions against. | Arrayable<Boundary> | undefined | — |
collisionPadding bits-ui The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | undefined | 8 |
customAnchor bits-ui Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger. You can pass a selector string or an HTMLElement. | string | HTMLElement | Measurable | null | undefined | — |
dir bits-ui The text direction of the content. | Direction | undefined | — |
escapeKeydownBehavior bits-ui Escape behavior type. `close`: Closes the element immediately. `defer-otherwise-close`: Delegates the action to its parent component that has an escape keydown handler. If no parent is found, it closes the element. `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done. `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an escape key press. | EscapeBehaviorType | undefined | `close` |
forceMount bits-ui Whether to force mount the component. | boolean | undefined | — |
hideWhenDetached bits-ui | boolean | undefined | — |
id bits-ui | string | undefined | — |
interactOutsideBehavior bits-ui Interact outside behavior type. `close`: Closes the element immediately. `defer-otherwise-close`: Delegates the action to the parent element. If no parent is found, it closes the element. `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done. `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an outside interaction. | InteractOutsideBehaviorType | undefined | `close` |
loop bits-ui When `true`, the menu will loop through items when navigating with the keyboard. | boolean | undefined | false |
onCloseAutoFocus bits-ui Event handler called when auto-focusing on close. Can be prevented. | EventCallback | undefined | — |
onEscapeKeydown bits-ui Callback fired when escape is pressed. | ((e: KeyboardEvent) => void) | undefined | — |
onFocusOutside bits-ui Callback fired when focus leaves the dismissible layer. | ((event: FocusEvent) => void) | undefined | — |
onInteractOutside bits-ui Callback fired when an outside interaction event completes, which is either a `pointerup`, `mouseup`, or `touchend` event, depending on the user's input device. | InteractOutsideEventHandler | undefined | — |
onOpenAutoFocus bits-ui Event handler called when auto-focusing on open. Can be prevented. | EventCallback | undefined | — |
preventOverflowTextSelection bits-ui Passing `true` will prevent the overflow of text selection outside the element, provided the element is the top layer. | boolean | undefined | `true` |
preventScroll bits-ui Whether to prevent scrolling the body when the content is open. Whether to prevent body scrolling when the content is open. | boolean | undefined | true |
ref bits-ui | HTMLElement | null | undefined | — |
side bits-ui The preferred side of the anchor to render against when open. Will be reversed when collisions occur. | "top" | "right" | "bottom" | "left" | undefined | — |
sideOffset bits-ui The distance in pixels from the anchor to the floating element. | number | undefined | — |
sticky bits-ui | "partial" | "always" | undefined | — |
strategy bits-ui The positioning strategy to use for the floating element. | "absolute" | "fixed" | undefined | — |
trapFocus bits-ui Whether focus is trapped within the focus scope. | boolean | undefined | false |
updatePositionStrategy bits-ui "optimized" will only update the position when necessary, while "always" will update the position on each animation frame, which is useful if the floating content is following something like a mouse cursor. | "always" | "optimized" | undefined | "optimized" |
DropdownMenu.Item (shared)
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the item. | string | — |
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
closeOnSelect bits-ui Whether or not the menu item should close when selected. | boolean | undefined | true |
disabled bits-ui When `true`, the user will not be able to interact with the menu item. | boolean | undefined | false |
id bits-ui | string | undefined | — |
onSelect bits-ui A callback fired when the menu item is selected. Prevent default behavior of selection with `event.preventDefault()`. | ((event: Event) => void) | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
textValue bits-ui Optional text to use for typeahead filtering. By default, typeahead will use the `.textContent` of the menu item. When the content is more complex, you can provide a string here instead. | string | undefined | undefined |
Built on bits-ui — all underlying Bits UI DropdownMenu props are forwarded
transparently.