DropdownMenu.Content Arrow offset prop removed
The offset prop was removed from DropdownMenu.Arrow.
Radix Primitives · all subjects
dropdown-menu
56 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
DropdownMenu.Content new positioning props
DropdownMenu.Content has new props: collisionBoundary, arrowPadding, sticky, and hideWhenDetached.
DropdownMenu.Content data-highlighted attribute for styling
DropdownMenu.Content supports a data-highlighted attribute for styling highlighted items.
DropdownMenu.Portal added for portalling behavior
DropdownMenu now has a Portal part. To avoid regressions, this part should be used if portalling behavior is desired. Note that z-index is no longer managed, providing full control of layering.
DropdownMenu nested structure changed to explicit parts
DropdownMenu submenus must now be created using explicit parts instead of indirect nesting.
DropdownMenu submenu support added
DropdownMenu now supports submenus with DropdownMenu.TriggerItem and a dir prop for RTL support.
DropdownMenu up arrow no longer opens menu
DropdownMenu's up arrow key no longer opens the menu.
Dropdown menu first item focus on keyboard open
DropdownMenu focuses the first item when opened via keyboard, aligning with WAI-ARIA spec.
DropdownMenu.Root controlled and uncontrolled
DropdownMenu.Root supports both controlled and uncontrolled APIs. Use defaultOpen prop for uncontrolled mode. Use open prop with onOpenChange callback for controlled mode.
DropdownMenu.Root modal prop
DropdownMenu.Root has a modal prop (boolean, default true). When true, interaction with outside elements is disabled and only menu content is visible to screen readers.
DropdownMenu.Root dir prop
DropdownMenu.Root has a dir prop with values 'ltr' or 'rtl', which sets the reading direction of submenus. If omitted, it inherits from DirectionProvider globally or defaults to LTR.
DropdownMenu.Portal forceMount and container
DropdownMenu.Portal has forceMount prop (boolean) for animation control, inherited by Content and SubContent. The container prop (HTMLElement, default document.body) specifies where to portal the content.
DropdownMenu.Content positioning props
DropdownMenu.Content has: side prop (top|right|bottom|left, default 'bottom'), sideOffset (number, default 0), align prop (start|center|end, default 'center'), alignOffset (number, default 0), avoidCollisions (boolean, default true), collisionBoundary (Element|null|Array, default []), collisionPadding (number|Partial<Record<Side,number>>, default 0), arrowPadding (number, default 0), sticky (partial|always, default 'partial'), hideWhenDetached (boolean, default false).
DropdownMenu.Content event handlers
DropdownMenu.Content has: onCloseAutoFocus (called when focus moves to trigger after closing), onEscapeKeyDown (called on escape key), onPointerDownOutside (called on pointer event outside), onFocusOutside (called when focus moves outside), onInteractOutside (called on pointer or focus event outside). All can be prevented with event.preventDefault().
DropdownMenu.Content loop prop
DropdownMenu.Content has loop prop (boolean, default false). When true, keyboard navigation loops from last item to first and vice versa.
DropdownMenu.Content CSS variables
DropdownMenu.Content exposes CSS variables: --radix-dropdown-menu-content-transform-origin (computed from content/arrow positions), --radix-dropdown-menu-content-available-width (remaining width between trigger and boundary), --radix-dropdown-menu-content-available-height (remaining height between trigger and boundary), --radix-dropdown-menu-trigger-width, --radix-dropdown-menu-trigger-height.
DropdownMenu.Arrow width and height
DropdownMenu.Arrow has width prop (number, default 10) and height prop (number, default 5) in pixels.
DropdownMenu.Item disabled and onSelect
DropdownMenu.Item has disabled prop (boolean) to prevent interaction. onSelect handler is called when user selects item via mouse or keyboard. Calling event.preventDefault() prevents dropdown menu from closing on selection.
DropdownMenu.Item textValue prop
DropdownMenu.Item has textValue prop (string) for typeahead purposes. By default uses .textContent of the item; use textValue when content is complex or non-textual.
DropdownMenu.Item data attributes
DropdownMenu.Item supports: data-orientation (vertical|horizontal), data-highlighted (present when highlighted), data-disabled (present when disabled).
DropdownMenu.CheckboxItem API
DropdownMenu.CheckboxItem has: checked prop (boolean|'indeterminate') for controlled state, onCheckedChange callback (checked: boolean) => void, disabled prop (boolean), onSelect handler, textValue prop for typeahead.
DropdownMenu.CheckboxItem data attributes
DropdownMenu.CheckboxItem supports: data-state (checked|unchecked|indeterminate), data-highlighted (present when highlighted), data-disabled (present when disabled).
DropdownMenu.RadioGroup API
DropdownMenu.RadioGroup has: value prop (string) for the selected item value, onValueChange callback (value: string) => void called when value changes.
DropdownMenu.RadioItem API
DropdownMenu.RadioItem has: value prop (string, required) for unique item identifier, disabled prop (boolean), onSelect handler, textValue prop for typeahead.
DropdownMenu.RadioItem data attributes
DropdownMenu.RadioItem supports: data-state (checked|unchecked|indeterminate), data-highlighted (present when highlighted), data-disabled (present when disabled).
DropdownMenu.ItemIndicator forceMount
DropdownMenu.ItemIndicator has forceMount prop (boolean) for animation control with React animation libraries.
DropdownMenu.ItemIndicator data attributes
DropdownMenu.ItemIndicator supports data-state attribute with values checked, unchecked, or indeterminate.
DropdownMenu.Sub controlled and uncontrolled
DropdownMenu.Sub supports both controlled and uncontrolled APIs. Use defaultOpen prop for uncontrolled mode. Use open prop with onOpenChange callback for controlled mode.
DropdownMenu.SubTrigger props
DropdownMenu.SubTrigger has: disabled prop (boolean), textValue prop (string) for typeahead purposes.
DropdownMenu.SubTrigger data attributes
DropdownMenu.SubTrigger supports: data-state (open|closed), data-highlighted (present when highlighted), data-disabled (present when disabled).
DropdownMenu.SubTrigger CSS variables
DropdownMenu.SubTrigger exposes same CSS variables as Content: --radix-dropdown-menu-content-transform-origin, --radix-dropdown-menu-content-available-width, --radix-dropdown-menu-content-available-height, --radix-dropdown-menu-trigger-width, --radix-dropdown-menu-trigger-height.
DropdownMenu.SubContent positioning and behavior
DropdownMenu.SubContent has: loop (boolean, default false), sideOffset (number, default 0), align (start|end, default 'start'), alignOffset (number, default 0), avoidCollisions (boolean, default true), collisionBoundary (Element|null|Array, default []), collisionPadding (number|Partial<Record<Side,number>>, default 0), arrowPadding (number, default 0), sticky (partial|always, default 'partial'), hideWhenDetached (boolean, default false).
DropdownMenu.SubContent event handlers
DropdownMenu.SubContent has: onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside handlers. All can be prevented with event.preventDefault().
DropdownMenu.SubContent data attributes
DropdownMenu.SubContent supports: data-state (open|closed), data-side (left|right|bottom|top), data-align (start|end|center), data-orientation (vertical|horizontal).
DropdownMenu asChild composition
DropdownMenu.Trigger, Content, Arrow, Item, Group, Label, CheckboxItem, RadioGroup, RadioItem, ItemIndicator, Separator, SubTrigger, and SubContent all support asChild prop (boolean, default false) to merge props and behavior with custom child element.
DropdownMenu typeahead support
DropdownMenu supports typeahead navigation. By default uses .textContent of items. Use textValue prop on Item, CheckboxItem, RadioItem, and SubTrigger when content is complex or non-textual.
DropdownMenu features
DropdownMenu supports: controlled or uncontrolled mode, submenus with configurable reading direction, items, labels, groups of items, checkable items (single or multiple) with optional indeterminate state, modal and non-modal modes, customizable side/alignment/offsets/collision handling, optional pointing arrow, fully managed focus, full keyboard navigation, typeahead support, customizable dismissing and layering behavior.
DropdownMenu with submenus example
```jsx <DropdownMenu.Root> <DropdownMenu.Trigger>…</DropdownMenu.Trigger> <DropdownMenu.Portal> <DropdownMenu.Content> <DropdownMenu.Item>…</DropdownMenu.Item> <DropdownMenu.Item>…</DropdownMenu.Item> <DropdownMenu.Separator /> <DropdownMenu.Sub> <DropdownMenu.SubTrigger>Sub menu →</DropdownMenu.SubTrigger> <DropdownMenu.Portal> <DropdownMenu.SubContent> <DropdownMenu.Item>Sub menu item</DropdownMenu.Item> <DropdownMenu.Item>Sub menu item</DropdownMenu.Item> <DropdownMenu.Arrow /> </DropdownMenu.SubContent> </DropdownMenu.Portal> </DropdownMenu.Sub> <DropdownMenu.Separator /> <DropdownMenu.Item>…</DropdownMenu.Item> </DropdownMenu.Content> </DropdownMenu.Portal> </DropdownMenu.Root> ```
DropdownMenu with checkbox items example
```jsx import * as React from "react"; import { CheckIcon } from "@radix-ui/react-icons"; import { DropdownMenu } from "radix-ui"; export default () => { const [checked, setChecked] = React.useState(true); return ( <DropdownMenu.Root> <DropdownMenu.Trigger>…</DropdownMenu.Trigger> <DropdownMenu.Portal> <DropdownMenu.Content> <DropdownMenu.Item>…</DropdownMenu.Item> <DropdownMenu.Item>…</DropdownMenu.Item> <DropdownMenu.Separator /> <DropdownMenu.CheckboxItem checked={checked} onCheckedChange={setChecked} > <DropdownMenu.ItemIndicator> <CheckIcon /> </DropdownMenu.ItemIndicator> Checkbox item </DropdownMenu.CheckboxItem> </DropdownMenu.Content> </DropdownMenu.Portal> </DropdownMenu.Root> ); }; ```
DropdownMenu with radio items example
```jsx import * as React from "react"; import { CheckIcon } from "@radix-ui/react-icons"; import { DropdownMenu } from "radix-ui"; export default () => { const [color, setColor] = React.useState("blue"); return ( <DropdownMenu.Root> <DropdownMenu.Trigger>…</DropdownMenu.Trigger> <DropdownMenu.Portal> <DropdownMenu.Content> <DropdownMenu.RadioGroup value={color} onValueChange={setColor}> <DropdownMenu.RadioItem value="red"> <DropdownMenu.ItemIndicator> <CheckIcon /> </DropdownMenu.ItemIndicator> Red </DropdownMenu.RadioItem> <DropdownMenu.RadioItem value="blue"> <DropdownMenu.ItemIndicator> <CheckIcon /> </DropdownMenu.ItemIndicator> Blue </DropdownMenu.RadioItem> <DropdownMenu.RadioItem value="green"> <DropdownMenu.ItemIndicator> <CheckIcon /> </DropdownMenu.ItemIndicator> Green </DropdownMenu.RadioItem> </DropdownMenu.RadioGroup> </DropdownMenu.Content> </DropdownMenu.Portal> </DropdownMenu.Root> ); }; ```
DropdownMenu styling disabled items with data-disabled
Style disabled items using the data-disabled attribute selector. Example: `.DropdownMenuItem[data-disabled] { color: gainsboro; }`
DropdownMenu constrain content size CSS example
```css .DropdownMenuContent { width: var(--radix-dropdown-menu-trigger-width); max-height: var(--radix-dropdown-menu-content-available-height); } ```
DropdownMenu origin-aware animation CSS example
```css .DropdownMenuContent { transform-origin: var(--radix-dropdown-menu-content-transform-origin); animation: scaleIn 0.5s ease-out; } @keyframes scaleIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } ```
DropdownMenu collision-aware animation CSS example
```css .DropdownMenuContent { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .DropdownMenuContent[data-side="top"] { animation-name: slideUp; } .DropdownMenuContent[data-side="bottom"] { animation-name: slideDown; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } ```
DropdownMenu parts structure
A Dropdown Menu is composed of Root (contains all parts), Trigger (wraps the control that opens the menu), TriggerIcon (optional icon part), Content (pops out when open), Label (renders a label, not focusable with arrow keys), Item (contains menu items), Group (groups multiple Items), RadioGroup (groups multiple RadioItems), RadioItem (controlled like a radio), CheckboxItem (controlled like a checkbox), Sub (contains submenu parts), SubTrigger (opens a submenu, must be inside Sub), and SubContent (pops out when submenu opens, must be inside Sub).
DropdownMenu basic example structure
Example showing basic DropdownMenu with Root wrapping Trigger containing a Button with TriggerIcon, Content with multiple Items separated by Separators, and a Sub submenu containing SubTrigger and SubContent with nested items. Items can have shortcut prop and color prop for semantic styling (e.g., color="red" for Delete).
DropdownMenu Content size prop
DropdownMenu.Content accepts a size prop. Valid sizes shown in examples are "1" and "2", allowing control over the content area size.
DropdownMenu Content variant prop
DropdownMenu.Content accepts a variant prop to customize visual style. Valid variants shown in examples are "solid" and "soft".
DropdownMenu Content color prop
DropdownMenu.Content accepts a color prop to assign specific colors. Examples show colors: indigo, cyan, orange, crimson, and gray. Individual items can override this with their own color prop.
DropdownMenu Content highContrast prop
DropdownMenu.Content accepts a highContrast prop (boolean) to increase color contrast with the background, improving visual distinction.
DropdownMenu Item color prop for semantic actions
DropdownMenu.Item accepts a color prop to override the content's color for semantic reasons, such as using color="red" for destructive actions like Delete.
DropdownMenu Item shortcut prop
DropdownMenu.Item accepts a shortcut prop to display keyboard shortcuts next to menu items (e.g., shortcut="⌘ E" for Edit, shortcut="⌘ ⌫" for Delete).
DropdownMenu SubTrigger placement requirement
DropdownMenu.SubTrigger must be rendered inside DropdownMenu.Sub and is an item that opens a submenu.
DropdownMenu SubContent placement requirement
DropdownMenu.SubContent must be rendered inside DropdownMenu.Sub and is the component that pops out when a submenu is open.
DropdownMenu Label not keyboard navigable
DropdownMenu.Label is used to render labels in the menu but will not be focusable using arrow keys, making it suitable for section headers without keyboard navigation.
Radix Themes 3.0.0 DropdownMenu TriggerIcon part
Radix Themes 3.0.0 added an optional `TriggerIcon` part to DropdownMenu that renders an arrow down indicator.