> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/radix-ui/primitives/llms.txt
> Use this file to discover all available pages before exploring further.
# Dropdown Menu
> Displays a menu to the user triggered by a button, typically used for navigation or commands.
## Overview
A dropdown menu displays a list of actions or options triggered by a button.
## Features
* Can be controlled or uncontrolled
* Supports submenus with configurable reading direction
* Supports items, labels, groups of items
* Supports checkable items (single or multiple)
* Customize side, alignment, offsets, collision handling
* Focus is fully managed
* Full keyboard navigation
* Typeahead support
* Optional modal or non-modal mode
## Installation
```bash theme={null}
npm install @radix-ui/react-dropdown-menu
```
## Anatomy
Import all parts and piece them together.
```tsx theme={null}
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
export default () => (
);
```
## API Reference
### Root
Contains all the parts of a dropdown menu.
The controlled open state of the dropdown menu. Must be used in conjunction with `onOpenChange`.
The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
Event handler called when the open state of the dropdown menu changes.
The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
The modality of the dropdown menu. When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
### Trigger
The button that toggles the dropdown menu.
Change the default rendered element for the one passed as a child, merging their props and behavior.
Supports all standard HTML button attributes.
### Portal
When used, portals the content part into the `body`.
Specify a container element to portal the content into.
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
### Content
The component that pops out when the dropdown menu is open.
Change the default rendered element for the one passed as a child, merging their props and behavior.
When `true`, keyboard navigation will loop from last item to first, and vice versa.
The preferred side of the trigger to render against when open.
The distance in pixels from the trigger.
The preferred alignment against the trigger. May change when collisions occur.
An offset in pixels from the "start" or "end" alignment options.
When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
The element used as the collision boundary. By default this is the viewport.
The distance in pixels from the boundary edges where collision detection should occur.
The sticky behavior on the align axis.
Whether to hide the content when the trigger becomes fully occluded.
Event handler called when focus moves to the trigger after closing. It can be prevented by calling `event.preventDefault`.
Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling `event.preventDefault`.
Event handler called when an interaction happens outside the bounds of the component. It can be prevented by calling `event.preventDefault`.
### Item
The component that contains the dropdown menu items.
Change the default rendered element for the one passed as a child, merging their props and behavior.
When `true`, prevents the user from interacting with the item.
Event handler called when the user selects an item (via mouse or keyboard). Calling `event.preventDefault` in this handler will prevent the dropdown menu from closing when selecting that item.
Optional text used for typeahead purposes. By default, the typeahead behavior will use the `.textContent` of the item. Use this when the content is complex, or you have non-textual content inside.
### Group
Used to group multiple items. Use in conjunction with `DropdownMenu.Label` to ensure good accessibility via automatic labelling.
Change the default rendered element for the one passed as a child, merging their props and behavior.
### Label
Used to render a label. It won't be focusable using arrow keys.
Change the default rendered element for the one passed as a child, merging their props and behavior.
### CheckboxItem
An item that can be controlled and rendered like a checkbox.
Change the default rendered element for the one passed as a child, merging their props and behavior.
The controlled checked state of the item. Must be used in conjunction with `onCheckedChange`.
Event handler called when the checked state changes.
When `true`, prevents the user from interacting with the item.
Event handler called when the user selects an item (via mouse or keyboard). Calling `event.preventDefault` in this handler will prevent the dropdown menu from closing when selecting that item.
Optional text used for typeahead purposes.
### RadioGroup
Used to group multiple `DropdownMenu.RadioItem`s.
Change the default rendered element for the one passed as a child, merging their props and behavior.
The value of the selected item in the group.
Event handler called when the value changes.
### RadioItem
An item that can be controlled and rendered like a radio.
Change the default rendered element for the one passed as a child, merging their props and behavior.
The unique value of the item.
When `true`, prevents the user from interacting with the item.
Event handler called when the user selects an item (via mouse or keyboard).
Optional text used for typeahead purposes.
### ItemIndicator
Renders when the parent `DropdownMenu.CheckboxItem` or `DropdownMenu.RadioItem` is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
Change the default rendered element for the one passed as a child, merging their props and behavior.
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
### Separator
Used to visually separate items in the dropdown menu.
Change the default rendered element for the one passed as a child, merging their props and behavior.
### Sub
Contains all the parts of a submenu.
The controlled open state of the submenu. Must be used in conjunction with `onOpenChange`.
The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
Event handler called when the open state of the submenu changes.
### SubTrigger
An item that opens a submenu. Must be rendered inside `DropdownMenu.Sub`.
Change the default rendered element for the one passed as a child, merging their props and behavior.
When `true`, prevents the user from interacting with the item.
Optional text used for typeahead purposes.
### SubContent
The component that pops out when a submenu is open. Must be rendered inside `DropdownMenu.Sub`.
Change the default rendered element for the one passed as a child, merging their props and behavior.
When `true`, keyboard navigation will loop from last item to first, and vice versa.
Event handler called when the escape key is down.
Event handler called when a pointer event occurs outside the bounds of the component.
### Arrow
An optional arrow element to render alongside the dropdown menu.
Change the default rendered element for the one passed as a child, merging their props and behavior.
The width of the arrow in pixels.
The height of the arrow in pixels.
## Example
```tsx Basic Usage theme={null}
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
function DropdownMenuDemo() {
return (
Options
New Tab
New Window
Settings
);
}
```
```tsx With Checkboxes and Radio theme={null}
import { useState } from 'react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { CheckIcon } from '@radix-ui/react-icons';
function DropdownMenuWithSelections() {
const [showBookmarks, setShowBookmarks] = useState(true);
const [showUrls, setShowUrls] = useState(false);
const [person, setPerson] = useState('pedro');
return (
View
View Options
Show Bookmarks
Show Full URLs
People
Pedro Duarte
Colm Tuite
);
}
```
```tsx With Submenu theme={null}
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
function DropdownMenuWithSubmenu() {
return (
File
New File
Save
Export
PDF
HTML
Markdown
Close
);
}
```
```tsx Controlled theme={null}
import { useState } from 'react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
function ControlledDropdownMenu() {
const [open, setOpen] = useState(false);
return (
{open ? 'Close' : 'Open'}
console.log('Edit')}>
Edit
console.log('Duplicate')}>
Duplicate
{
console.log('Delete');
setOpen(false);
}}
>
Delete
);
}
```
## Accessibility
Adheres to the [Menu Button WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button) and uses roving tabindex to manage focus movement among menu items.
### Keyboard Interactions
* `Space` - Opens the dropdown menu and activates items
* `Enter` - Opens the dropdown menu and activates items
* `ArrowDown` - When focus is on trigger, opens the dropdown menu. When open, moves focus to the next item
* `ArrowUp` - Moves focus to the previous item
* `ArrowRight` - Opens a submenu or moves focus to the next item in a submenu
* `ArrowLeft` - Closes a submenu or moves to the parent menu
* `Esc` - Closes the dropdown menu and moves focus to trigger