Install the component from your command line.
npm install @radix-ui/react-dropdown-menu
Copy Import the components and piece the parts together.
import * as DropdownMenu from '@radix-ui/react-dropdown-menu' ;
export default ( ) => (
< DropdownMenu.Root >
< DropdownMenu.Trigger />
< DropdownMenu.Content >
< DropdownMenu.Label />
< DropdownMenu.Item />
< DropdownMenu.Group >
< DropdownMenu.Item />
</ DropdownMenu.Group >
< DropdownMenu.CheckboxItem >
< DropdownMenu.ItemIndicator />
</ DropdownMenu.CheckboxItem >
< DropdownMenu.RadioGroup >
< DropdownMenu.RadioItem >
< DropdownMenu.ItemIndicator />
</ DropdownMenu.RadioItem >
</ DropdownMenu.RadioGroup >
< DropdownMenu.Separator />
< DropdownMenu.Arrow />
</ DropdownMenu.Content >
</ DropdownMenu.Root >
) ;
Copy Create your styled dropdown menu component from the primitive parts.
import * as DropdownMenu from '@radix-ui/react-dropdown-menu' ;
const StyledContent = styled ( DropdownMenu . Content , {
minWidth : 130 ,
backgroundColor : 'white' ,
borderRadius : 6 ,
padding : 5 ,
boxShadow : '0px 5px 15px -5px hsla(206,22%,7%,.15)' ,
} ) ;
const StyledItem = styled ( DropdownMenu . Item , {
fontSize : 13 ,
padding : '5px 10px' ,
borderRadius : 3 ,
cursor : 'default' ,
'&:focus' : {
outline : 'none' ,
backgroundColor : 'dodgerblue' ,
color : 'white' ,
} ,
} ) ;
const StyledArrow = styled ( DropdownMenu . Arrow , {
fill : 'white' ,
} ) ;
export default ( ) => (
< DropdownMenu.Root >
< DropdownMenu.Trigger > Trigger </ DropdownMenu.Trigger >
< StyledContent >
< StyledItem > Cut </ StyledItem >
< StyledItem > Copy </ StyledItem >
< StyledItem > Paste </ StyledItem >
< StyledArrow />
</ StyledContent >
</ DropdownMenu.Root >
) ;
Copy Contains all the parts of a dropdown menu.
Prop Type Default Required defaultOpenbooleanopenbooleanonOpenChangefunctionidstring
The button that toggles the dropdown menu. By default, the DropdownMenu.Content will position itself against the trigger.
Prop Type Default Required asenumbutton
The component that pops out when the dropdown menu is open.
Prop Type Default Required asenumdivdisableOutsidePointerEventsbooleanfalseonEscapeKeyDownfunctiononPointerDownOutsidefunctiononInteractOutsidefunctiondisableOutsideScrollbooleantrueportalledbooleantrueforceMountbooleananchorRefrefsideenum"bottom"sideOffsetnumber0alignenum"center"alignOffsetnumber0avoidCollisionsbooleantruecollisionToleranceboolean0
An optional arrow element to render alongside the dropdown menu. This can be used to help visually link the anchor with the DropdownMenu.Content. Must be rendered inside DropdownMenu.Content.
Prop Type Default Required asenumsvgwidthnumber10heightnumber5offsetnumber
The component that contains the dropdown menu items.
Prop Type Default Required asenumdivdisabledbooleanonSelectfunctiontextValuestring
Used to group multiple DropdownMenu.Items.
Prop Type Default Required asenumdiv
Used to render a label. It won't be focusable using arrow keys.
Prop Type Default Required asenumdiv
An item that can be controlled and rendered like a checkbox.
Prop Type Default Required asenumdivcheckedbooleanonCheckedChangefunctiondisabledbooleanonSelectfunctiontextValuestring
Used to group multiple DropdownMenu.RadioItems.
Prop Type Default Required asenumdivvaluestringonValueChangefunction
An item that can be controlled and rendered like a radio.
Prop Type Default Required asenumdivvaluestringdisabledbooleanonSelectfunctiontextValuestring
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.
Prop Type Default Required asenumspanforceMountboolean
Used to visually separate items in the dropdown menu.
Prop Type Default Required asenumdiv
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.
const scaleIn = css . keyframes ( {
'0%' : { opacity : 0 , transform : 'scale(0)' } ,
'100%' : { opacity : 1 , transform : 'scale(1)' } ,
} ) ;
const StyledContent = styled ( DropdownMenu . Content , {
transformOrigin :
'var(--radix-dropdown-menu-content-transform-origin)' ,
animation : ` ${ scaleIn } 0.5s ease-out ` ,
} ) ;
Copy 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.
const slideDown = css . keyframes ( {
'0%' : { opacity : 0 , transform : 'translateY(-10px)' } ,
'100%' : { opacity : 1 , transform : 'translateY(0)' } ,
} ) ;
const slideUp = css . keyframes ( {
'0%' : { opacity : 0 , transform : 'translateY(10px)' } ,
'100%' : { opacity : 1 , transform : 'translateY(0)' } ,
} ) ;
const StyledContent = styled ( DropdownMenu . Content , {
'&[data-side="top"]' : { animationName : slideUp } ,
'&[data-side="bottom"]' : { animationName : slideDown } ,
animationDuration : '0.6s' ,
animationTimingFunction : 'cubic-bezier(0.16, 1, 0.3, 1)' ,
} ) ;
Copy You can add special styles to disabled items via the data-disabled attribute.
Show code
import * as DropdownMenu from '@radix-ui/react-dropdown-menu' ;
const StyledContent = styled ( DropdownMenu . Content , {
minWidth : 130 ,
backgroundColor : 'white' ,
borderRadius : 6 ,
padding : 5 ,
boxShadow : '0px 5px 15px -5px hsla(206,22%,7%,.15)' ,
} ) ;
const StyledItem = styled ( DropdownMenu . Item , {
fontSize : 13 ,
padding : '5px 10px' ,
borderRadius : 3 ,
cursor : 'default' ,
'&[data-disabled]' : {
color : 'gainsboro' ,
} ,
'&:focus' : {
outline : 'none' ,
backgroundColor : 'dodgerblue' ,
color : 'white' ,
} ,
} ) ;
const StyledArrow = styled ( DropdownMenu . Arrow , {
fill : 'white' ,
} ) ;
export default ( ) => (
< DropdownMenu.Root >
< DropdownMenu.Trigger > Trigger </ DropdownMenu.Trigger >
< StyledContent >
< StyledItem disabled > Cut </ StyledItem >
< StyledItem > Copy </ StyledItem >
< StyledItem > Paste </ StyledItem >
< StyledArrow />
</ StyledContent >
</ DropdownMenu.Root >
) ;
Copy Use the Separator part to add a separator between items.
Show code
import * as DropdownMenu from '@radix-ui/react-dropdown-menu' ;
const StyledContent = styled ( DropdownMenu . Content , {
minWidth : 130 ,
backgroundColor : 'white' ,
borderRadius : 6 ,
padding : 5 ,
boxShadow : '0px 5px 15px -5px hsla(206,22%,7%,.15)' ,
} ) ;
const StyledItem = styled ( DropdownMenu . Item , {
fontSize : 13 ,
padding : '5px 10px' ,
borderRadius : 3 ,
cursor : 'default' ,
'&:focus' : {
outline : 'none' ,
backgroundColor : 'dodgerblue' ,
color : 'white' ,
} ,
} ) ;
const StyledSeparator = styled ( DropdownMenu . Separator , {
height : 1 ,
backgroundColor : 'gainsboro' ,
margin : 5 ,
} ) ;
const StyledArrow = styled ( DropdownMenu . Arrow , {
fill : 'white' ,
} ) ;
export default ( ) => (
< DropdownMenu.Root >
< DropdownMenu.Trigger > Trigger </ DropdownMenu.Trigger >
< StyledContent >
< StyledItem > Undo </ StyledItem >
< StyledItem > Redo </ StyledItem >
< StyledSeparator />
< StyledItem > Cut </ StyledItem >
< StyledItem > Copy </ StyledItem >
< StyledItem > Paste </ StyledItem >
< StyledArrow />
</ StyledContent >
</ DropdownMenu.Root >
) ;
Copy Use the Label part to help label a section.
Show code
import * as DropdownMenu from '@radix-ui/react-dropdown-menu' ;
const StyledContent = styled ( DropdownMenu . Content , {
minWidth : 130 ,
backgroundColor : 'white' ,
borderRadius : 6 ,
padding : 5 ,
boxShadow : '0px 5px 15px -5px hsla(206,22%,7%,.15)' ,
} ) ;
const StyledItem = styled ( DropdownMenu . Item , {
fontSize : 13 ,
padding : '5px 10px' ,
borderRadius : 3 ,
cursor : 'default' ,
'&:focus' : {
outline : 'none' ,
backgroundColor : 'dodgerblue' ,
color : 'white' ,
} ,
} ) ;
const StyledLabel = styled ( DropdownMenu . Label , {
color : 'slategray' ,
fontSize : 13 ,
padding : '5px 10px' ,
cursor : 'default' ,
} ) ;
const StyledSeparator = styled ( DropdownMenu . Separator , {
height : 1 ,
backgroundColor : 'gainsboro' ,
margin : 5 ,
} ) ;
const StyledArrow = styled ( DropdownMenu . Arrow , {
fill : 'white' ,
} ) ;
export default ( ) => (
< DropdownMenu.Root >
< DropdownMenu.Trigger > Trigger </ DropdownMenu.Trigger >
< StyledContent >
< StyledLabel > Recently Closed </ StyledLabel >
< StyledItem > Modulz </ StyledItem >
< StyledItem > Radix - ui </ StyledItem >
< StyledItem > Stitches </ StyledItem >
< StyledSeparator />
< StyledLabel > Recently Visited </ StyledLabel >
< StyledItem > GitHub </ StyledItem >
< StyledItem > Modulz </ StyledItem >
< StyledArrow />
</ StyledContent >
</ DropdownMenu.Root >
) ;
Copy Use the CheckboxItem part to add an item that can be checked.
Show code
import * as DropdownMenu from '@radix-ui/react-dropdown-menu' ;
import { CheckIcon } from '@modulz/radix-icons' ;
const StyledContent = styled ( DropdownMenu . Content , {
minWidth : 130 ,
backgroundColor : 'white' ,
borderRadius : 6 ,
padding : 5 ,
boxShadow : '0px 5px 15px -5px hsla(206,22%,7%,.15)' ,
} ) ;
const itemStyles = {
fontSize : 13 ,
padding : '5px 10px 5px 25px' ,
borderRadius : 3 ,
cursor : 'default' ,
position : 'relative' ,
'&:focus' : {
outline : 'none' ,
backgroundColor : 'dodgerblue' ,
color : 'white' ,
} ,
} ;
const StyledItem = styled ( DropdownMenu . Item , itemStyles ) ;
const StyledCheckboxItem = styled (
DropdownMenu . CheckboxItem ,
itemStyles
) ;
const StyledItemIndicator = styled ( DropdownMenu . ItemIndicator , {
position : 'absolute' ,
left : 5 ,
} ) ;
const StyledSeparator = styled ( DropdownMenu . Separator , {
height : 1 ,
backgroundColor : 'gainsboro' ,
margin : 5 ,
} ) ;
const StyledArrow = styled ( DropdownMenu . Arrow , {
fill : 'white' ,
} ) ;
export default ( ) => {
const [ checked , setChecked ] = React . useState ( true ) ;
return (
< DropdownMenu.Root >
< DropdownMenu.Trigger > Trigger </ DropdownMenu.Trigger >
< StyledContent >
< StyledItem > About Radix UI </ StyledItem >
< StyledItem > Check for updates </ StyledItem >
< StyledSeparator />
< StyledCheckboxItem
checked = { checked }
onCheckedChange = { setChecked }
>
< StyledItemIndicator >
< CheckIcon />
</ StyledItemIndicator >
Show hidden files
</ StyledCheckboxItem >
< StyledArrow />
</ StyledContent >
</ DropdownMenu.Root >
) ;
} ;
Copy Use the RadioGroup and RadioItem parts to add an item that can be checked amongst others.
Show code
import * as DropdownMenu from '@radix-ui/react-dropdown-menu' ;
import { CheckIcon } from '@modulz/radix-icons' ;
const StyledContent = styled ( DropdownMenu . Content , {
minWidth : 130 ,
backgroundColor : 'white' ,
borderRadius : 6 ,
padding : 5 ,
boxShadow : '0px 5px 15px -5px hsla(206,22%,7%,.15)' ,
} ) ;
const itemStyles = {
fontSize : 13 ,
padding : '5px 10px 5px 25px' ,
borderRadius : 3 ,
cursor : 'default' ,
position : 'relative' ,
'&:focus' : {
outline : 'none' ,
backgroundColor : 'dodgerblue' ,
color : 'white' ,
} ,
} ;
const StyledItem = styled ( DropdownMenu . Item , itemStyles ) ;
const StyledRadioGroup = styled ( DropdownMenu . RadioGroup , { } ) ;
const StyledRadioItem = styled ( DropdownMenu . RadioItem , itemStyles ) ;
const StyledItemIndicator = styled ( DropdownMenu . ItemIndicator , {
position : 'absolute' ,
left : 5 ,
} ) ;
const StyledArrow = styled ( DropdownMenu . Arrow , {
fill : 'white' ,
} ) ;
export default ( ) => {
const [ color , setColor ] = React . useState ( 'blue' ) ;
return (
< DropdownMenu.Root >
< DropdownMenu.Trigger > Trigger </ DropdownMenu.Trigger >
< StyledContent >
< StyledRadioGroup value = { color } onValueChange = { setColor } >
< StyledRadioItem value = " red " >
< StyledItemIndicator >
< CheckIcon />
</ StyledItemIndicator >
Red
</ StyledRadioItem >
< StyledRadioItem value = " blue " >
< StyledItemIndicator >
< CheckIcon />
</ StyledItemIndicator >
Blue
</ StyledRadioItem >
< StyledRadioItem value = " green " >
< StyledItemIndicator >
< CheckIcon />
</ StyledItemIndicator >
Green
</ StyledRadioItem >
</ StyledRadioGroup >
< StyledArrow />
</ StyledContent >
</ DropdownMenu.Root >
) ;
} ;
Copy Show code
import * as DropdownMenu from '@radix-ui/react-dropdown-menu' ;
const StyledContent = styled ( DropdownMenu . Content , {
minWidth : 130 ,
backgroundColor : 'white' ,
borderRadius : 6 ,
padding : 5 ,
boxShadow : '0px 5px 15px -5px hsla(206,22%,7%,.15)' ,
} ) ;
const StyledItem = styled ( DropdownMenu . Item , {
fontSize : 13 ,
padding : '5px 10px' ,
borderRadius : 3 ,
cursor : 'default' ,
'&:focus' : {
outline : 'none' ,
backgroundColor : 'dodgerblue' ,
color : 'white' ,
} ,
} ) ;
const StyledArrow = styled ( DropdownMenu . Arrow , {
fill : 'white' ,
} ) ;
const Image = styled ( 'img' , {
width : 24 ,
height : 24 ,
borderRadius : 9999 ,
marginRight : 10 ,
} ) ;
export default ( ) => (
< DropdownMenu.Root >
< DropdownMenu.Trigger > Trigger </ DropdownMenu.Trigger >
< StyledContent >
< StyledItem >
< Image src = " https://images.unsplash.com/photo-1463453091185-61582044d556?auto=format&fit=facearea&facepad=3&w=24&h=24&dpr=2&q=80 " />
Adolfo Hess
</ StyledItem >
< StyledItem >
< Image src = " https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&facepad=3&w=24&h=24&dpr=2&q=80 " />
Miyah Myles
</ StyledItem >
< StyledItem >
< Image src = " https://images.unsplash.com/photo-1508186225823-0963cf9ab0de?auto=format&fit=facearea&facepad=3&w=24&h=24&dpr=2&q=80 " />
Sylvia Reynolds
</ StyledItem >
< StyledArrow />
</ StyledContent >
</ DropdownMenu.Root >
) ;
Copy Adheres to the Menu Button WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.
Key Description Space Activates the focused item. Enter Activates the focused item. ArrowDown Moves focus to the next item. ArrowUp Moves focus to the previous item. Esc Closes the dropdown menu and moves focus to DropdownMenu.Trigger.