Skip to content

Dropdown Menu Primitive

Shows a menu with options or actions when a user clicks the trigger button.

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/dropdown-menu
import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
import * as React from "react";
import { StyleSheet, Text, ViewStyle } from "react-native";
const INDICATOR_STYLE: ViewStyle = {
height: 5,
width: 5,
backgroundColor: "red",
borderRadius: 50,
position: "absolute",
left: -10,
top: 6,
};
function Example() {
const [checkboxValue, setCheckboxValue] = React.useState(false);
const [subCheckboxValue, setSubCheckboxValue] = React.useState(false);
const [radioValue, setRadioValue] = React.useState('pedro');
return (
<DropdownMenuPrimitive.Root>
<DropdownMenuPrimitive.Trigger>
<Text>Open Dropdown Menu</Text>
</DropdownMenuPrimitive.Trigger>
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Overlay style={StyleSheet.absoluteFill}>
<DropdownMenuPrimitive.Content>
<DropdownMenuPrimitive.Item>
<Text>Back</Text>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item>
<Text>Forward</Text>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item>
<Text>Reload</Text>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Sub>
<DropdownMenuPrimitive.SubTrigger>
<Text>More Tools</Text>
</DropdownMenuPrimitive.SubTrigger>
<DropdownMenuPrimitive.SubContent>
<DropdownMenuPrimitive.Item>
<Text>Save Page As...</Text>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item>
<Text>Create Shortcut...</Text>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Separator />
<DropdownMenuPrimitive.Item>
<Text>Developer Tools</Text>
</DropdownMenuPrimitive.Item>
</DropdownMenuPrimitive.SubContent>
</DropdownMenuPrimitive.Sub>
<DropdownMenuPrimitive.Separator />
<DropdownMenuPrimitive.CheckboxItem
checked={checkboxValue}
onCheckedChange={setCheckboxValue}
closeOnPress={false}
>
<Text>Show Bookmarks Bar</Text>
<DropdownMenuPrimitive.ItemIndicator style={INDICATOR_STYLE} />
</DropdownMenuPrimitive.CheckboxItem>
<DropdownMenuPrimitive.CheckboxItem
checked={subCheckboxValue}
onCheckedChange={setSubCheckboxValue}
closeOnPress={false}
>
<Text>Show Full URLs</Text>
<DropdownMenuPrimitive.ItemIndicator style={INDICATOR_STYLE} />
</DropdownMenuPrimitive.CheckboxItem>
<DropdownMenuPrimitive.Separator />
<DropdownMenuPrimitive.RadioGroup
value={radioValue}
onValueChange={setRadioValue}
>
<DropdownMenuPrimitive.Label>
People
</DropdownMenuPrimitive.Label>
<DropdownMenuPrimitive.Separator />
<DropdownMenuPrimitive.RadioItem
value="pedro"
closeOnPress={false}
>
<Text>Elmer Fudd</Text>
<DropdownMenuPrimitive.ItemIndicator
style={INDICATOR_STYLE}
/>
</DropdownMenuPrimitive.RadioItem>
<DropdownMenuPrimitive.RadioItem
value="colm"
closeOnPress={false}
>
<Text>Foghorn Leghorn</Text>
<DropdownMenuPrimitive.ItemIndicator
style={INDICATOR_STYLE}
/>
</DropdownMenuPrimitive.RadioItem>
</DropdownMenuPrimitive.RadioGroup>
</DropdownMenuPrimitive.Content>
</DropdownMenuPrimitive.Overlay>
</DropdownMenuPrimitive.Portal>
</DropdownMenuPrimitive.Root>
);
}

Extends View props

PropTypeNote
onOpenChange(open: boolean) => void(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
MethodsargsNote
openopens the dropdown menu
closecloses the dropdown menu
PropTypeNote
children*React.ReactNode
forceMounttrue | undefined(optional)
hostNamestringWeb Only (optional)
containerHTMLElement | null | undefinedWeb Only (optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined;(optional)

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined(optional)
alignOffsetnumber(optional)
insetsInsets(optional)
avoidCollisionsboolean(optional)
align’start’ | ‘center’ | ‘end’(optional)
side’top’ | ‘bottom’(optional)
sideOffsetnumber(optional)
disablePositioningStylebooleanNative Only (optional)
loopbooleanWeb Only (optional)
onCloseAutoFocus(event: Event) => voidWeb Only (optional)
onEscapeKeyDown(event: KeyboardEvent) => voidWeb Only (optional)
onPointerDownOutside(event: PointerDownOutsideEvent) => voidWeb Only (optional)
onFocusOutside(event: FocusOutsideEvent) => voidWeb Only (optional)
onInteractOutsidePointerDownOutsideEvent | FocusOutsideEventWeb Only (optional)
collisionBoundaryElement | null | Array<Element | null>Web Only (optional)
sticky’partial’ | ‘always’Web Only (optional)
hideWhenDetachedbooleanWeb Only (optional)

Extends Text props

PropTypeNote
asChildboolean(optional)

Extends Text props

PropTypeNote
asChildboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
textValueboolean(optional)
closeOnPressboolean(optional)

Extends Pressable props

PropTypeNote
checked*boolean
onCheckedChange*(value: boolean) => void
textValue*string
asChildboolean(optional)
closeOnPressbooleanNative Only_(optional)_

Extends View props

PropTypeNote
value*boolean
onValueChange*(value: boolean) => void
asChildboolean(optional)

Extends Pressable props

PropTypeNote
value*boolean
onCheckedChange*(value: boolean) => void
asChildboolean(optional)
closeOnPressbooleanNative Only_(optional)_

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue /undefined

Extends View props

PropTypeNote
asChildboolean(optional)
decorativeboolean(optional)

Extends View props

PropTypeNote
asChildboolean(optional)
defaultOpenboolean(optional)
openboolean(optional)
onOpenChange(value: boolean) => void(optional)

Extends Pressable props

PropTypeNote
textValuestring(optional)
asChildboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
forceMounttrue /undefined

Must be used within a Root component. It provides the following values from the dropdown menu: open, and onOpenChange.

Must be used within a Sub component. It provides the following values from the dropdown menu: open, and onOpenChange.