Displays a menu to the user—such as a set of actions or functions—triggered by a button.
import React from 'react';import * as DropdownMenu from '@radix-ui/react-dropdown-menu';import { HamburgerMenuIcon, DotFilledIcon, CheckIcon, ChevronRightIcon, } from '@radix-ui/react-icons';import './styles.css';const DropdownMenuDemo = () => {const [bookmarksChecked, setBookmarksChecked] = React.useState(true);const [urlsChecked, setUrlsChecked] = React.useState(false);const [person, setPerson] = React.useState('pedro');return (<DropdownMenu.Root><DropdownMenu.Trigger asChild><button className="IconButton" aria-label="Customise options"><HamburgerMenuIcon /></button></DropdownMenu.Trigger><DropdownMenu.Portal><DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}><DropdownMenu.Item className="DropdownMenuItem">New Tab <div className="RightSlot">⌘+T</div></DropdownMenu.Item><DropdownMenu.Item className="DropdownMenuItem">New Window <div className="RightSlot">⌘+N</div></DropdownMenu.Item><DropdownMenu.Item className="DropdownMenuItem" disabled>New Private Window <div className="RightSlot">⇧+⌘+N</div></DropdownMenu.Item><DropdownMenu.Sub><DropdownMenu.SubTrigger className="DropdownMenuSubTrigger">More Tools<div className="RightSlot"><ChevronRightIcon /></div></DropdownMenu.SubTrigger><DropdownMenu.Portal><DropdownMenu.SubContent className="DropdownMenuSubContent" sideOffset={2} alignOffset={-5} ><DropdownMenu.Item className="DropdownMenuItem">Save Page As… <div className="RightSlot">⌘+S</div></DropdownMenu.Item><DropdownMenu.Item className="DropdownMenuItem">Create Shortcut…</DropdownMenu.Item><DropdownMenu.Item className="DropdownMenuItem">Name Window…</DropdownMenu.Item><DropdownMenu.Separator className="DropdownMenu.Separator" /><DropdownMenu.Item className="DropdownMenuItem">Developer Tools</DropdownMenu.Item></DropdownMenu.SubContent></DropdownMenu.Portal></DropdownMenu.Sub><DropdownMenu.Separator className="DropdownMenuSeparator" /><DropdownMenu.CheckboxItem className="DropdownMenuCheckboxItem" checked={bookmarksChecked} onCheckedChange={setBookmarksChecked} ><DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator"><CheckIcon /></DropdownMenu.ItemIndicator>Show Bookmarks <div className="RightSlot">⌘+B</div></DropdownMenu.CheckboxItem><DropdownMenu.CheckboxItem className="DropdownMenuCheckboxItem" checked={urlsChecked} onCheckedChange={setUrlsChecked} ><DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator"><CheckIcon /></DropdownMenu.ItemIndicator>Show Full URLs</DropdownMenu.CheckboxItem><DropdownMenu.Separator className="DropdownMenuSeparator" /><DropdownMenu.Label className="DropdownMenuLabel">People</DropdownMenu.Label><DropdownMenu.RadioGroup value={person} onValueChange={setPerson}><DropdownMenu.RadioItem className="DropdownMenuRadioItem" value="pedro"><DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator"><DotFilledIcon /></DropdownMenu.ItemIndicator>Pedro Duarte</DropdownMenu.RadioItem><DropdownMenu.RadioItem className="DropdownMenuRadioItem" value="colm"><DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator"><DotFilledIcon /></DropdownMenu.ItemIndicator>Colm Tuite</DropdownMenu.RadioItem></DropdownMenu.RadioGroup><DropdownMenu.Arrow className="DropdownMenuArrow" /></DropdownMenu.Content></DropdownMenu.Portal></DropdownMenu.Root>);};export default DropdownMenuDemo;
Can be controlled or uncontrolled.
Supports submenus with configurable reading direction.
Supports items, labels, groups of items.
Supports checkable items (single or multiple) with optional indeterminate state.
Supports modal and non-modal modes.
Customize side, alignment, offsets, collision handling.
Optionally render a pointing arrow.
Focus is fully managed.
Full keyboard navigation.
Typeahead support.
Dismissing and layering behavior is highly customizable.
Install the component from your command line.
Import all parts and piece them together.
Contains all the parts of a dropdown menu.
The button that toggles the dropdown menu. By default, the DropdownMenu.Content
will position itself against the trigger.
When used, portals the content part into the body
.
The component that pops out when the dropdown menu is open.
An optional arrow element to render alongside the dropdown menu. This can be used to help visually link the trigger with the DropdownMenu.Content
. Must be rendered inside DropdownMenu.Content
.
The component that contains the dropdown menu items.
Used to group multiple DropdownMenu.Item
s.
Used to render a label. It won't be focusable using arrow keys.
An item that can be controlled and rendered like a checkbox.
Used to group multiple DropdownMenu.RadioItem
s.
An item that can be controlled and rendered like a radio.
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.
Used to visually separate items in the dropdown menu.
Contains all the parts of a submenu.
An item that opens a submenu. Must be rendered inside DropdownMenu.Sub
.
The component that pops out when a submenu is open. Must be rendered inside DropdownMenu.Sub
.
You can create submenus by using DropdownMenu.Sub
in combination with its parts.
You can add special styles to disabled items via the data-disabled
attribute.
Use the Separator
part to add a separator between items.
Use the Label
part to help label a section.
Use the CheckboxItem
part to add an item that can be checked.
Use the RadioGroup
and RadioItem
parts to add an item that can be checked amongst others.
You can add extra decorative elements in the Item
parts, such as images.
You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.
We expose several CSS custom properties such as --radix-dropdown-menu-trigger-width
and --radix-dropdown-menu-content-available-height
to support this. Use them to constrain the content dimensions.
We expose a CSS custom property --radix-dropdown-menu-content-transform-origin
. Use it to animate the content from its computed origin based on side
, sideOffset
, align
, alignOffset
and any collisions.
We expose data-side
and data-align
attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.
Adheres to the Menu Button WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.
Create your own API by abstracting the primitive parts into your own component.
This example abstracts the DropdownMenu.Arrow
and DropdownMenu.ItemIndicator
parts. It also wraps implementation details for CheckboxItem
and RadioItem
.