Dropdown Menu Primitive
Shows a menu with options or actions when a user clicks the trigger button.
Installation
Install the component via your command line.
npx expo install @rn-primitives/dropdown-menuInstall @radix-ui/react-dropdown-menu
npx expo install @radix-ui/react-dropdown-menuCopy/paste the following code for web to ~/components/primitives/dropdown-menu/dropdown-menu.web.tsx
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';import { useAugmentedRef, useControllableState } from '~/components/primitives/hooks';import * as Slot from '~/components/primitives/slot';import type { ForceMountable, PositionedContentProps, PressableRef, SlottablePressableProps, SlottableTextProps, SlottableViewProps, TextRef, ViewRef,} from '~/components/primitives/types';import { EmptyGestureResponderEvent } from '~/components/primitives/utils';import * as React from 'react';import { GestureResponderEvent, Pressable, Text, View } from 'react-native';import type { DropdownMenuCheckboxItemProps, DropdownMenuItemProps, DropdownMenuOverlayProps, DropdownMenuPortalProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerRef,} from './types';
const DropdownMenuContext = React.createContext<{ open: boolean; onOpenChange: (open: boolean) => void;} | null>(null);
const Root = React.forwardRef< ViewRef, SlottableViewProps & { onOpenChange?: (open: boolean) => void }>(({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => { const [open, setOpen] = React.useState(false);
function onOpenChange(open: boolean) { setOpen(open); onOpenChangeProp?.(open); }
const Component = asChild ? Slot.View : View; return ( <DropdownMenuContext.Provider value={{ open, onOpenChange }}> <DropdownMenu.Root open={open} onOpenChange={onOpenChange}> <Component ref={ref} {...viewProps} /> </DropdownMenu.Root> </DropdownMenuContext.Provider> );});
Root.displayName = 'RootWebDropdownMenu';
function useRootContext() { const context = React.useContext(DropdownMenuContext); if (!context) { throw new Error( 'DropdownMenu compound components cannot be rendered outside the DropdownMenu component' ); } return context;}
const Trigger = React.forwardRef<DropdownMenuTriggerRef, SlottablePressableProps>( ({ asChild, disabled = false, ...props }, ref) => { const { open, onOpenChange } = useRootContext(); const augmentedRef = useAugmentedRef({ ref, methods: { open() { onOpenChange(true); }, close() { onOpenChange(false); }, }, });
React.useLayoutEffect(() => { if (augmentedRef.current) { const augRef = augmentedRef.current as unknown as HTMLDivElement; augRef.dataset.state = open ? 'open' : 'closed'; } }, [open]);
React.useLayoutEffect(() => { if (augmentedRef.current) { const augRef = augmentedRef.current as unknown as HTMLDivElement; if (disabled) { augRef.dataset.disabled = 'true'; } else { augRef.dataset.disabled = undefined; } } }, [disabled]);
const Component = asChild ? Slot.Pressable : Pressable; return ( <DropdownMenu.Trigger disabled={disabled ?? undefined} asChild> <Component ref={augmentedRef} {...props} /> </DropdownMenu.Trigger> ); });
Trigger.displayName = 'TriggerWebDropdownMenu';
function Portal({ forceMount, container, children }: DropdownMenuPortalProps) { return <DropdownMenu.Portal forceMount={forceMount} container={container} children={children} />;}
const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & DropdownMenuOverlayProps>( ({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} {...props} />; });
Overlay.displayName = 'OverlayWebDropdownMenu';
const DropdownMenuContentContext = React.createContext<{ close: () => void;} | null>(null);
const Content = React.forwardRef<PressableRef, SlottablePressableProps & PositionedContentProps>( ( { asChild = false, forceMount, align, side, sideOffset, alignOffset = 0, avoidCollisions = true, insets, loop = true, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionBoundary, sticky, hideWhenDetached, ...props }, ref ) => { const itemRef = React.useRef<HTMLDivElement>(null);
function close() { itemRef.current?.click(); } const Component = asChild ? Slot.Pressable : Pressable; return ( <DropdownMenuContentContext.Provider value={{ close }}> <DropdownMenu.Content forceMount={forceMount} alignOffset={alignOffset} avoidCollisions={avoidCollisions} collisionPadding={insets} loop={loop} onCloseAutoFocus={onCloseAutoFocus} onEscapeKeyDown={onEscapeKeyDown} onPointerDownOutside={onPointerDownOutside} onFocusOutside={onFocusOutside} onInteractOutside={onInteractOutside} collisionBoundary={collisionBoundary} sticky={sticky} hideWhenDetached={hideWhenDetached} align={align} side={side} sideOffset={sideOffset} > <Component ref={ref} {...props} /> <DropdownMenu.Item ref={itemRef} aria-hidden style={{ position: 'fixed', top: 0, left: 0, zIndex: -999999999 }} aria-disabled tabIndex={-1} hidden /> </DropdownMenu.Content> </DropdownMenuContentContext.Provider> ); });
Content.displayName = 'ContentWebDropdownMenu';
function useDropdownMenuContentContext() { const context = React.useContext(DropdownMenuContentContext); if (!context) { throw new Error( 'DropdownMenu compound components cannot be rendered outside the DropdownMenu component' ); } return context;}
const Item = React.forwardRef<PressableRef, SlottablePressableProps & DropdownMenuItemProps>( ( { asChild, textValue, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref ) => { const { close } = useDropdownMenuContentContext();
function onKeyDown(ev: React.KeyboardEvent) { onKeyDownProp?.(ev); if (ev.key === 'Enter' || ev.key === ' ') { onPressProp?.(EmptyGestureResponderEvent); if (closeOnPress) { close(); } } }
function onPress(ev: GestureResponderEvent) { onPressProp?.(ev); if (closeOnPress) { close(); } }
const Component = asChild ? Slot.Pressable : Pressable; return ( <DropdownMenu.Item textValue={textValue} disabled={props.disabled ?? undefined} onSelect={closeOnPress ? undefined : onSelected} asChild > <Component ref={ref} // @ts-expect-error web only onKeyDown={onKeyDown} onPress={onPress} {...props} /> </DropdownMenu.Item> ); });
Item.displayName = 'ItemWebDropdownMenu';
const Group = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <DropdownMenu.Group asChild> <Component ref={ref} {...props} /> </DropdownMenu.Group> );});
Group.displayName = 'GroupWebDropdownMenu';
const Label = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Text : Text; return ( <DropdownMenu.Label asChild> <Component ref={ref} {...props} /> </DropdownMenu.Label> );});
Label.displayName = 'LabelWebDropdownMenu';
const CheckboxItem = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuCheckboxItemProps>( ( { asChild, checked, onCheckedChange, textValue, disabled = false, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref ) => { const { close } = useDropdownMenuContentContext();
function onKeyDown(ev: React.KeyboardEvent) { onKeyDownProp?.(ev); if (ev.key === 'Enter' || ev.key === ' ') { onPressProp?.(EmptyGestureResponderEvent); onCheckedChange?.(!checked); if (closeOnPress) { close(); } } }
function onPress(ev: GestureResponderEvent) { onPressProp?.(ev); onCheckedChange?.(!checked); if (closeOnPress) { close(); } } const Component = asChild ? Slot.Pressable : Pressable; return ( <DropdownMenu.CheckboxItem textValue={textValue} checked={checked} onCheckedChange={onCheckedChange} onSelect={closeOnPress ? undefined : onSelected} disabled={disabled ?? undefined} asChild > <Component ref={ref} // @ts-expect-error web only onKeyDown={onKeyDown} onPress={onPress} role='button' {...props} /> </DropdownMenu.CheckboxItem> ); });
CheckboxItem.displayName = 'CheckboxItemWebDropdownMenu';
const DropdownMenuRadioGroupContext = React.createContext<{ value?: string; onValueChange?: (value: string) => void;} | null>(null);
const RadioGroup = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuRadioGroupProps>( ({ asChild, value, onValueChange, ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <DropdownMenuRadioGroupContext.Provider value={{ value, onValueChange }}> <DropdownMenu.RadioGroup value={value} onValueChange={onValueChange} asChild> <Component ref={ref} {...props} /> </DropdownMenu.RadioGroup> </DropdownMenuRadioGroupContext.Provider> ); });
RadioGroup.displayName = 'RadioGroupWebDropdownMenu';
function useDropdownMenuRadioGroupContext() { const context = React.useContext(DropdownMenuRadioGroupContext); if (!context) { throw new Error( 'DropdownMenuRadioGroup compound components cannot be rendered outside the DropdownMenuRadioGroup component' ); } return context;}
const RadioItem = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuRadioItemProps>( ( { asChild, value, textValue, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref ) => { const { onValueChange } = useDropdownMenuRadioGroupContext(); const { close } = useDropdownMenuContentContext();
function onKeyDown(ev: React.KeyboardEvent) { onKeyDownProp?.(ev); if (ev.key === 'Enter' || ev.key === ' ') { onValueChange?.(value); onPressProp?.(EmptyGestureResponderEvent); if (closeOnPress) { close(); } } }
function onPress(ev: GestureResponderEvent) { onValueChange?.(value); onPressProp?.(ev); if (closeOnPress) { close(); } } const Component = asChild ? Slot.Pressable : Pressable; return ( <DropdownMenu.RadioItem value={value} textValue={textValue} disabled={props.disabled ?? undefined} onSelect={closeOnPress ? undefined : onSelected} asChild > <Component ref={ref} // @ts-expect-error web only onKeyDown={onKeyDown} onPress={onPress} {...props} /> </DropdownMenu.RadioItem> ); });
RadioItem.displayName = 'RadioItemWebDropdownMenu';
const ItemIndicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>( ({ asChild, forceMount, ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <DropdownMenu.ItemIndicator forceMount={forceMount} asChild> <Component ref={ref} {...props} /> </DropdownMenu.ItemIndicator> ); });
ItemIndicator.displayName = 'ItemIndicatorWebDropdownMenu';
const Separator = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSeparatorProps>( ({ asChild, decorative, ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <DropdownMenu.Separator asChild> <Component ref={ref} {...props} /> </DropdownMenu.Separator> ); });
Separator.displayName = 'SeparatorWebDropdownMenu';
const DropdownMenuSubContext = React.createContext<{ open: boolean; onOpenChange: (open: boolean) => void;} | null>(null);
const Sub = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSubProps>( ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => { const [open = false, onOpenChange] = useControllableState({ prop: openProp, defaultProp: defaultOpen, onChange: onOpenChangeProp, });
const Component = asChild ? Slot.View : View; return ( <DropdownMenuSubContext.Provider value={{ open, onOpenChange }}> <DropdownMenu.Sub open={open} onOpenChange={onOpenChange}> <Component ref={ref} {...props} /> </DropdownMenu.Sub> </DropdownMenuSubContext.Provider> ); });
Sub.displayName = 'SubWebDropdownMenu';
function useSubContext() { const context = React.useContext(DropdownMenuSubContext); if (!context) { throw new Error( 'DropdownMenu compound components cannot be rendered outside the DropdownMenu component' ); } return context;}
const SubTrigger = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuSubTriggerProps>(({ asChild, textValue, disabled = false, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return ( <DropdownMenu.SubTrigger disabled={disabled ?? undefined} textValue={textValue} asChild> <Component ref={ref} {...props} /> </DropdownMenu.SubTrigger> );});
SubTrigger.displayName = 'SubTriggerWebDropdownMenu';
const SubContent = React.forwardRef<PressableRef, SlottablePressableProps & ForceMountable>( ({ asChild = false, forceMount, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return ( <DropdownMenu.Portal> <DropdownMenu.SubContent forceMount={forceMount}> <Component ref={ref} {...props} /> </DropdownMenu.SubContent> </DropdownMenu.Portal> ); });
Content.displayName = 'ContentWebDropdownMenu';
export { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Overlay, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger, useRootContext, useSubContext,};
export type { DropdownMenuTriggerRef };
function onSelected(ev: Event) { ev.preventDefault();}Copy/paste the following code for native to ~/components/primitives/dropdown-menu/dropdown-menu.tsx
import { useAugmentedRef, useControllableState, useRelativePosition, type LayoutPosition,} from '~/components/primitives/hooks';import { Portal as RNPPortal } from '~/components/primitives/portal';import * as Slot from '~/components/primitives/slot';import type { ForceMountable, PositionedContentProps, PressableRef, SlottablePressableProps, SlottableTextProps, SlottableViewProps, TextRef, ViewRef,} from '~/components/primitives/types';import * as React from 'react';import { BackHandler, Pressable, Text, View, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle,} from 'react-native';import type { DropdownMenuCheckboxItemProps, DropdownMenuItemProps, DropdownMenuOverlayProps, DropdownMenuPortalProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerRef,} from './types';
interface IRootContext { open: boolean; onOpenChange: (open: boolean) => void; triggerPosition: LayoutPosition | null; setTriggerPosition: (triggerPosition: LayoutPosition | null) => void; contentLayout: LayoutRectangle | null; setContentLayout: (contentLayout: LayoutRectangle | null) => void; nativeID: string;}
const RootContext = React.createContext<IRootContext | null>(null);
const Root = React.forwardRef< ViewRef, SlottableViewProps & { onOpenChange?: (open: boolean) => void }>(({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => { const nativeID = React.useId(); const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null); const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null); const [open, setOpen] = React.useState(false);
function onOpenChange(open: boolean) { setOpen(open); onOpenChangeProp?.(open); }
const Component = asChild ? Slot.View : View; return ( <RootContext.Provider value={{ open, onOpenChange, contentLayout, setContentLayout, nativeID, setTriggerPosition, triggerPosition, }} > <Component ref={ref} {...viewProps} /> </RootContext.Provider> );});
Root.displayName = 'RootNativeDropdownMenu';
function useRootContext() { const context = React.useContext(RootContext); if (!context) { throw new Error( 'DropdownMenu compound components cannot be rendered outside the DropdownMenu component' ); } return context;}
const Trigger = React.forwardRef<DropdownMenuTriggerRef, SlottablePressableProps>( ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => { const { open, onOpenChange, setTriggerPosition } = useRootContext();
const augmentedRef = useAugmentedRef({ ref, methods: { open: () => { onOpenChange(true); augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => { setTriggerPosition({ width, pageX, pageY: pageY, height }); }); }, close: () => { setTriggerPosition(null); onOpenChange(false); }, }, });
function onPress(ev: GestureResponderEvent) { if (disabled) return; augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => { setTriggerPosition({ width, pageX, pageY: pageY, height }); }); const newValue = !open; onOpenChange(newValue); onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <Component ref={augmentedRef} aria-disabled={disabled ?? undefined} role='button' onPress={onPress} disabled={disabled ?? undefined} aria-expanded={open} {...props} /> ); });
Trigger.displayName = 'TriggerNativeDropdownMenu';
/** * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers. */function Portal({ forceMount, hostName, children }: DropdownMenuPortalProps) { const value = useRootContext();
if (!value.triggerPosition) { return null; }
if (!forceMount) { if (!value.open) { return null; } }
return ( <RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}> <RootContext.Provider value={value}>{children}</RootContext.Provider> </RNPPortal> );}
const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & DropdownMenuOverlayProps>( ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => { const { open, onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
function onPress(ev: GestureResponderEvent) { if (closeOnPress) { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); } OnPressProp?.(ev); }
if (!forceMount) { if (!open) { return null; } }
const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} onPress={onPress} {...props} />; });
Overlay.displayName = 'OverlayNativeDropdownMenu';
/** * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`. */const Content = React.forwardRef<PressableRef, SlottablePressableProps & PositionedContentProps>( ( { asChild = false, forceMount, align = 'start', side = 'bottom', sideOffset = 0, alignOffset = 0, avoidCollisions = true, onLayout: onLayoutProp, insets, style, disablePositioningStyle, ...props }, ref ) => { const { open, onOpenChange, nativeID, triggerPosition, setTriggerPosition, contentLayout, setContentLayout, } = useRootContext();
React.useEffect(() => { const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); return true; });
return () => { setContentLayout(null); backHandler.remove(); }; }, []);
const positionStyle = useRelativePosition({ align, avoidCollisions, triggerPosition, contentLayout, alignOffset, insets, sideOffset, side, disablePositioningStyle, });
function onLayout(event: LayoutChangeEvent) { setContentLayout(event.nativeEvent.layout); onLayoutProp?.(event); }
if (!forceMount) { if (!open) { return null; } }
const Component = asChild ? Slot.Pressable : Pressable; return ( <Component ref={ref} role='menu' nativeID={nativeID} aria-modal={true} style={[positionStyle, style]} onLayout={onLayout} {...props} /> ); });
Content.displayName = 'ContentNativeDropdownMenu';
const Item = React.forwardRef<PressableRef, SlottablePressableProps & DropdownMenuItemProps>( ( { asChild, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props }, ref ) => { const { onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
function onPress(ev: GestureResponderEvent) { if (closeOnPress) { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); } onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <Component ref={ref} role='menuitem' onPress={onPress} disabled={disabled} aria-valuetext={textValue} aria-disabled={!!disabled} accessibilityState={{ disabled: !!disabled }} {...props} /> ); });
Item.displayName = 'ItemNativeDropdownMenu';
const Group = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='group' {...props} />;});
Group.displayName = 'GroupNativeDropdownMenu';
const Label = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Text : Text; return <Component ref={ref} {...props} />;});
Label.displayName = 'LabelNativeDropdownMenu';
type FormItemContext = | { checked: boolean } | { value: string | undefined; onValueChange: (value: string) => void; };
const FormItemContext = React.createContext<FormItemContext | null>(null);
const CheckboxItem = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuCheckboxItemProps>( ( { asChild, checked, onCheckedChange, textValue, onPress: onPressProp, closeOnPress = true, disabled = false, ...props }, ref ) => { const { onOpenChange, setContentLayout, setTriggerPosition, nativeID } = useRootContext();
function onPress(ev: GestureResponderEvent) { onCheckedChange(!checked); if (closeOnPress) { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); } onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <FormItemContext.Provider value={{ checked }}> <Component ref={ref} role='checkbox' aria-checked={checked} onPress={onPress} disabled={disabled} aria-disabled={!!disabled} aria-valuetext={textValue} accessibilityState={{ disabled: !!disabled }} {...props} /> </FormItemContext.Provider> ); });
CheckboxItem.displayName = 'CheckboxItemNativeDropdownMenu';
function useFormItemContext() { const context = React.useContext(FormItemContext); if (!context) { throw new Error( 'CheckboxItem or RadioItem compound components cannot be rendered outside of a CheckboxItem or RadioItem component' ); } return context;}
const RadioGroup = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuRadioGroupProps>( ({ asChild, value, onValueChange, ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <FormItemContext.Provider value={{ value, onValueChange }}> <Component ref={ref} role='radiogroup' {...props} /> </FormItemContext.Provider> ); });
RadioGroup.displayName = 'RadioGroupNativeDropdownMenu';
type BothFormItemContext = Exclude<FormItemContext, { checked: boolean }> & { checked: boolean;};
const RadioItemContext = React.createContext({} as { itemValue: string });
const RadioItem = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuRadioItemProps>( ( { asChild, value: itemValue, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props }, ref ) => { const { onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
const { value, onValueChange } = useFormItemContext() as BothFormItemContext; function onPress(ev: GestureResponderEvent) { onValueChange(itemValue); if (closeOnPress) { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); } onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <RadioItemContext.Provider value={{ itemValue }}> <Component ref={ref} onPress={onPress} role='radio' aria-checked={value === itemValue} disabled={disabled ?? false} accessibilityState={{ disabled: disabled ?? false, checked: value === itemValue, }} aria-valuetext={textValue} {...props} /> </RadioItemContext.Provider> ); });
RadioItem.displayName = 'RadioItemNativeDropdownMenu';
function useItemIndicatorContext() { return React.useContext(RadioItemContext);}
const ItemIndicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>( ({ asChild, forceMount, ...props }, ref) => { const { itemValue } = useItemIndicatorContext(); const { checked, value } = useFormItemContext() as BothFormItemContext;
if (!forceMount) { if (itemValue == null && !checked) { return null; } if (value !== itemValue) { return null; } } const Component = asChild ? Slot.View : View; return <Component ref={ref} role='presentation' {...props} />; });
ItemIndicator.displayName = 'ItemIndicatorNativeDropdownMenu';
const Separator = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSeparatorProps>( ({ asChild, decorative, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component role={decorative ? 'presentation' : 'separator'} ref={ref} {...props} />; });
Separator.displayName = 'SeparatorNativeDropdownMenu';
const SubContext = React.createContext<{ nativeID: string; open: boolean; onOpenChange: (value: boolean) => void;} | null>(null);
const Sub = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSubProps>( ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => { const nativeID = React.useId(); const [open = false, onOpenChange] = useControllableState({ prop: openProp, defaultProp: defaultOpen, onChange: onOpenChangeProp, });
const Component = asChild ? Slot.View : View; return ( <SubContext.Provider value={{ nativeID, open, onOpenChange, }} > <Component ref={ref} {...props} /> </SubContext.Provider> ); });
Sub.displayName = 'SubNativeDropdownMenu';
function useSubContext() { const context = React.useContext(SubContext); if (!context) { throw new Error('Sub compound components cannot be rendered outside of a Sub component'); } return context;}
const SubTrigger = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuSubTriggerProps>(({ asChild, textValue, onPress: onPressProp, disabled = false, ...props }, ref) => { const { nativeID, open, onOpenChange } = useSubContext();
function onPress(ev: GestureResponderEvent) { onOpenChange(!open); onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <Component ref={ref} aria-valuetext={textValue} role='menuitem' aria-expanded={open} accessibilityState={{ expanded: open, disabled: !!disabled }} nativeID={nativeID} onPress={onPress} disabled={disabled} aria-disabled={!!disabled} {...props} /> );});
SubTrigger.displayName = 'SubTriggerNativeDropdownMenu';
const SubContent = React.forwardRef<PressableRef, SlottablePressableProps & ForceMountable>( ({ asChild = false, forceMount, ...props }, ref) => { const { open, nativeID } = useSubContext();
if (!forceMount) { if (!open) { return null; } }
const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} role='group' aria-labelledby={nativeID} {...props} />; });
Content.displayName = 'ContentNativeDropdownMenu';
export { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Overlay, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger, useRootContext, useSubContext,};
export type { DropdownMenuTriggerRef };Copy/paste the following code for types to ~/components/primitives/dropdown-menu/types.ts
import type { ForceMountable, PressableRef } from '~/components/primitives/types';
interface DropdownMenuPortalProps extends ForceMountable { children: React.ReactNode; /** * Platform: NATIVE ONLY */ hostName?: string; /** * Platform: WEB ONLY */ container?: HTMLElement | null | undefined;}
interface DropdownMenuOverlayProps extends ForceMountable { closeOnPress?: boolean;}
interface DropdownMenuItemProps { textValue?: string; closeOnPress?: boolean;}
interface DropdownMenuCheckboxItemProps { checked: boolean; onCheckedChange: (checked: boolean) => void; closeOnPress?: boolean; textValue?: string;}
interface DropdownMenuRadioGroupProps { value: string | undefined; onValueChange: (value: string) => void;}
interface DropdownMenuRadioItemProps { value: string; textValue?: string; closeOnPress?: boolean;}
interface DropdownMenuSeparatorProps { decorative?: boolean;}
interface DropdownMenuSubProps { defaultOpen?: boolean; open?: boolean; onOpenChange?: (value: boolean) => void;}
interface DropdownMenuSubTriggerProps { textValue?: string;}
interface DropdownMenuTriggerRef extends PressableRef { open: () => void; close: () => void;}
export type { DropdownMenuCheckboxItemProps, DropdownMenuItemProps, DropdownMenuOverlayProps, DropdownMenuPortalProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerRef,};Copy/paste the following code for exporting to ~/components/primitives/dropdown-menu/index.ts
export * from './dropdown-menu';Copy/paste the following code for native to ~/components/primitives/dropdown-menu/index.tsx
import { useAugmentedRef, useControllableState, useRelativePosition, type LayoutPosition,} from '~/components/primitives/hooks';import { Portal as RNPPortal } from '~/components/primitives/portal';import * as Slot from '~/components/primitives/slot';import type { ForceMountable, PositionedContentProps, PressableRef, SlottablePressableProps, SlottableTextProps, SlottableViewProps, TextRef, ViewRef,} from '~/components/primitives/types';import * as React from 'react';import { BackHandler, Pressable, Text, View, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle,} from 'react-native';import type { DropdownMenuCheckboxItemProps, DropdownMenuItemProps, DropdownMenuOverlayProps, DropdownMenuPortalProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerRef,} from './types';
interface IRootContext { open: boolean; onOpenChange: (open: boolean) => void; triggerPosition: LayoutPosition | null; setTriggerPosition: (triggerPosition: LayoutPosition | null) => void; contentLayout: LayoutRectangle | null; setContentLayout: (contentLayout: LayoutRectangle | null) => void; nativeID: string;}
const RootContext = React.createContext<IRootContext | null>(null);
const Root = React.forwardRef< ViewRef, SlottableViewProps & { onOpenChange?: (open: boolean) => void }>(({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => { const nativeID = React.useId(); const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null); const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null); const [open, setOpen] = React.useState(false);
function onOpenChange(open: boolean) { setOpen(open); onOpenChangeProp?.(open); }
const Component = asChild ? Slot.View : View; return ( <RootContext.Provider value={{ open, onOpenChange, contentLayout, setContentLayout, nativeID, setTriggerPosition, triggerPosition, }} > <Component ref={ref} {...viewProps} /> </RootContext.Provider> );});
Root.displayName = 'RootNativeDropdownMenu';
function useRootContext() { const context = React.useContext(RootContext); if (!context) { throw new Error( 'DropdownMenu compound components cannot be rendered outside the DropdownMenu component' ); } return context;}
const Trigger = React.forwardRef<DropdownMenuTriggerRef, SlottablePressableProps>( ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => { const { open, onOpenChange, setTriggerPosition } = useRootContext();
const augmentedRef = useAugmentedRef({ ref, methods: { open: () => { onOpenChange(true); augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => { setTriggerPosition({ width, pageX, pageY: pageY, height }); }); }, close: () => { setTriggerPosition(null); onOpenChange(false); }, }, });
function onPress(ev: GestureResponderEvent) { if (disabled) return; augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => { setTriggerPosition({ width, pageX, pageY: pageY, height }); }); const newValue = !open; onOpenChange(newValue); onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <Component ref={augmentedRef} aria-disabled={disabled ?? undefined} role='button' onPress={onPress} disabled={disabled ?? undefined} aria-expanded={open} {...props} /> ); });
Trigger.displayName = 'TriggerNativeDropdownMenu';
/** * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers. */function Portal({ forceMount, hostName, children }: DropdownMenuPortalProps) { const value = useRootContext();
if (!value.triggerPosition) { return null; }
if (!forceMount) { if (!value.open) { return null; } }
return ( <RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}> <RootContext.Provider value={value}>{children}</RootContext.Provider> </RNPPortal> );}
const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & DropdownMenuOverlayProps>( ({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => { const { open, onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
function onPress(ev: GestureResponderEvent) { if (closeOnPress) { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); } OnPressProp?.(ev); }
if (!forceMount) { if (!open) { return null; } }
const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} onPress={onPress} {...props} />; });
Overlay.displayName = 'OverlayNativeDropdownMenu';
/** * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`. */const Content = React.forwardRef<PressableRef, SlottablePressableProps & PositionedContentProps>( ( { asChild = false, forceMount, align = 'start', side = 'bottom', sideOffset = 0, alignOffset = 0, avoidCollisions = true, onLayout: onLayoutProp, insets, style, disablePositioningStyle, ...props }, ref ) => { const { open, onOpenChange, nativeID, triggerPosition, setTriggerPosition, contentLayout, setContentLayout, } = useRootContext();
React.useEffect(() => { const backHandler = BackHandler.addEventListener('hardwareBackPress', () => { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); return true; });
return () => { setContentLayout(null); backHandler.remove(); }; }, []);
const positionStyle = useRelativePosition({ align, avoidCollisions, triggerPosition, contentLayout, alignOffset, insets, sideOffset, side, disablePositioningStyle, });
function onLayout(event: LayoutChangeEvent) { setContentLayout(event.nativeEvent.layout); onLayoutProp?.(event); }
if (!forceMount) { if (!open) { return null; } }
const Component = asChild ? Slot.Pressable : Pressable; return ( <Component ref={ref} role='menu' nativeID={nativeID} aria-modal={true} style={[positionStyle, style]} onLayout={onLayout} {...props} /> ); });
Content.displayName = 'ContentNativeDropdownMenu';
const Item = React.forwardRef<PressableRef, SlottablePressableProps & DropdownMenuItemProps>( ( { asChild, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props }, ref ) => { const { onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
function onPress(ev: GestureResponderEvent) { if (closeOnPress) { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); } onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <Component ref={ref} role='menuitem' onPress={onPress} disabled={disabled} aria-valuetext={textValue} aria-disabled={!!disabled} accessibilityState={{ disabled: !!disabled }} {...props} /> ); });
Item.displayName = 'ItemNativeDropdownMenu';
const Group = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='group' {...props} />;});
Group.displayName = 'GroupNativeDropdownMenu';
const Label = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Text : Text; return <Component ref={ref} {...props} />;});
Label.displayName = 'LabelNativeDropdownMenu';
type FormItemContext = | { checked: boolean } | { value: string | undefined; onValueChange: (value: string) => void; };
const FormItemContext = React.createContext<FormItemContext | null>(null);
const CheckboxItem = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuCheckboxItemProps>( ( { asChild, checked, onCheckedChange, textValue, onPress: onPressProp, closeOnPress = true, disabled = false, ...props }, ref ) => { const { onOpenChange, setContentLayout, setTriggerPosition, nativeID } = useRootContext();
function onPress(ev: GestureResponderEvent) { onCheckedChange(!checked); if (closeOnPress) { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); } onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <FormItemContext.Provider value={{ checked }}> <Component ref={ref} role='checkbox' aria-checked={checked} onPress={onPress} disabled={disabled} aria-disabled={!!disabled} aria-valuetext={textValue} accessibilityState={{ disabled: !!disabled }} {...props} /> </FormItemContext.Provider> ); });
CheckboxItem.displayName = 'CheckboxItemNativeDropdownMenu';
function useFormItemContext() { const context = React.useContext(FormItemContext); if (!context) { throw new Error( 'CheckboxItem or RadioItem compound components cannot be rendered outside of a CheckboxItem or RadioItem component' ); } return context;}
const RadioGroup = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuRadioGroupProps>( ({ asChild, value, onValueChange, ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <FormItemContext.Provider value={{ value, onValueChange }}> <Component ref={ref} role='radiogroup' {...props} /> </FormItemContext.Provider> ); });
RadioGroup.displayName = 'RadioGroupNativeDropdownMenu';
type BothFormItemContext = Exclude<FormItemContext, { checked: boolean }> & { checked: boolean;};
const RadioItemContext = React.createContext({} as { itemValue: string });
const RadioItem = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuRadioItemProps>( ( { asChild, value: itemValue, textValue, onPress: onPressProp, disabled = false, closeOnPress = true, ...props }, ref ) => { const { onOpenChange, setContentLayout, setTriggerPosition } = useRootContext();
const { value, onValueChange } = useFormItemContext() as BothFormItemContext; function onPress(ev: GestureResponderEvent) { onValueChange(itemValue); if (closeOnPress) { setTriggerPosition(null); setContentLayout(null); onOpenChange(false); } onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <RadioItemContext.Provider value={{ itemValue }}> <Component ref={ref} onPress={onPress} role='radio' aria-checked={value === itemValue} disabled={disabled ?? false} accessibilityState={{ disabled: disabled ?? false, checked: value === itemValue, }} aria-valuetext={textValue} {...props} /> </RadioItemContext.Provider> ); });
RadioItem.displayName = 'RadioItemNativeDropdownMenu';
function useItemIndicatorContext() { return React.useContext(RadioItemContext);}
const ItemIndicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>( ({ asChild, forceMount, ...props }, ref) => { const { itemValue } = useItemIndicatorContext(); const { checked, value } = useFormItemContext() as BothFormItemContext;
if (!forceMount) { if (itemValue == null && !checked) { return null; } if (value !== itemValue) { return null; } } const Component = asChild ? Slot.View : View; return <Component ref={ref} role='presentation' {...props} />; });
ItemIndicator.displayName = 'ItemIndicatorNativeDropdownMenu';
const Separator = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSeparatorProps>( ({ asChild, decorative, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component role={decorative ? 'presentation' : 'separator'} ref={ref} {...props} />; });
Separator.displayName = 'SeparatorNativeDropdownMenu';
const SubContext = React.createContext<{ nativeID: string; open: boolean; onOpenChange: (value: boolean) => void;} | null>(null);
const Sub = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSubProps>( ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => { const nativeID = React.useId(); const [open = false, onOpenChange] = useControllableState({ prop: openProp, defaultProp: defaultOpen, onChange: onOpenChangeProp, });
const Component = asChild ? Slot.View : View; return ( <SubContext.Provider value={{ nativeID, open, onOpenChange, }} > <Component ref={ref} {...props} /> </SubContext.Provider> ); });
Sub.displayName = 'SubNativeDropdownMenu';
function useSubContext() { const context = React.useContext(SubContext); if (!context) { throw new Error('Sub compound components cannot be rendered outside of a Sub component'); } return context;}
const SubTrigger = React.forwardRef< PressableRef, SlottablePressableProps & DropdownMenuSubTriggerProps>(({ asChild, textValue, onPress: onPressProp, disabled = false, ...props }, ref) => { const { nativeID, open, onOpenChange } = useSubContext();
function onPress(ev: GestureResponderEvent) { onOpenChange(!open); onPressProp?.(ev); }
const Component = asChild ? Slot.Pressable : Pressable; return ( <Component ref={ref} aria-valuetext={textValue} role='menuitem' aria-expanded={open} accessibilityState={{ expanded: open, disabled: !!disabled }} nativeID={nativeID} onPress={onPress} disabled={disabled} aria-disabled={!!disabled} {...props} /> );});
SubTrigger.displayName = 'SubTriggerNativeDropdownMenu';
const SubContent = React.forwardRef<PressableRef, SlottablePressableProps & ForceMountable>( ({ asChild = false, forceMount, ...props }, ref) => { const { open, nativeID } = useSubContext();
if (!forceMount) { if (!open) { return null; } }
const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} role='group' aria-labelledby={nativeID} {...props} />; });
Content.displayName = 'ContentNativeDropdownMenu';
export { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Overlay, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger, useRootContext, useSubContext,};
export type { DropdownMenuTriggerRef };Copy/paste the following code for types to ~/components/primitives/dropdown-menu/types.ts
import type { ForceMountable, PressableRef } from '~/components/primitives/types';
interface DropdownMenuPortalProps extends ForceMountable { children: React.ReactNode; /** * Platform: NATIVE ONLY */ hostName?: string; /** * Platform: WEB ONLY */ container?: HTMLElement | null | undefined;}
interface DropdownMenuOverlayProps extends ForceMountable { closeOnPress?: boolean;}
interface DropdownMenuItemProps { textValue?: string; closeOnPress?: boolean;}
interface DropdownMenuCheckboxItemProps { checked: boolean; onCheckedChange: (checked: boolean) => void; closeOnPress?: boolean; textValue?: string;}
interface DropdownMenuRadioGroupProps { value: string | undefined; onValueChange: (value: string) => void;}
interface DropdownMenuRadioItemProps { value: string; textValue?: string; closeOnPress?: boolean;}
interface DropdownMenuSeparatorProps { decorative?: boolean;}
interface DropdownMenuSubProps { defaultOpen?: boolean; open?: boolean; onOpenChange?: (value: boolean) => void;}
interface DropdownMenuSubTriggerProps { textValue?: string;}
interface DropdownMenuTriggerRef extends PressableRef { open: () => void; close: () => void;}
export type { DropdownMenuCheckboxItemProps, DropdownMenuItemProps, DropdownMenuOverlayProps, DropdownMenuPortalProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerRef,};Usage
import * as React from 'react';import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';import { Text } from 'react-native';
function Example() { const [checkboxValue, setCheckboxValue] = React.useState(false); const [subCheckboxValue, setSubCheckboxValue] = React.useState(false); const [radioValue, setRadioValue] = React.useState('pedro');
return ( <DropdownMenu.Root> <DropdownMenu.Trigger> <Text> Open Dropdown Menu </Text> </DropdownMenu.Trigger>
<DropdownMenuPrimitive.Portal> <DropdownMenuPrimitive.Overlay> <DropdownMenu.Content> <DropdownMenu.Item> <Text>Back</Text> </DropdownMenu.Item> <DropdownMenu.Item> <Text>Forward</Text> </DropdownMenu.Item> <DropdownMenu.Item> <Text>Reload</Text> </DropdownMenu.Item>
<DropdownMenu.Sub> <DropdownMenu.SubTrigger> <Text>More Tools</Text> </DropdownMenu.SubTrigger> <DropdownMenu.SubContent> <DropdownMenu.Item> <Text>Save Page As...</Text> </DropdownMenu.Item> <DropdownMenu.Item> <Text>Create Shortcut...</Text> </DropdownMenu.Item>
<DropdownMenu.Separator /> <DropdownMenu.Item> <Text>Developer Tools</Text> </DropdownMenu.Item> </DropdownMenuSubContent> </DropdownMenuSub>
<DropdownMenu.Separator /> <DropdownMenu.CheckboxItem checked={checkboxValue} onCheckedChange={setCheckboxValue} closeOnPress={false} > <Text>Show Bookmarks Bar</Text> </DropdownMenu.CheckboxItem> <DropdownMenu.CheckboxItem checked={subCheckboxValue} onCheckedChange={setSubCheckboxValue} closeOnPress={false} > <Text>Show Full URLs</Text> </DropdownMenu.CheckboxItem> <DropdownMenu.Separator /> <DropdownMenu.RadioGroup value={radioValue} onValueChange={setRadioValue}> <DropdownMenu.Label>People</DropdownMenu.Label> <DropdownMenu.Separator /> <DropdownMenu.RadioItem value='pedro' closeOnPress={false}> <Text>Elmer Fudd</Text> </DropdownMenu.RadioItem> <DropdownMenu.RadioItem value='colm' closeOnPress={false}> <Text>Foghorn Leghorn</Text> </DropdownMenu.RadioItem> </DropdownMenu.RadioGroup> </DropdownMenu.Content> </DropdownMenuPrimitive.Overlay> </DropdownMenuPrimitive.Portal> </DropdownMenu.Root> );}Props
Root
Extends View props
| Prop | Type | Note |
|---|---|---|
| onOpenChange | (open: boolean) => void | (optional) |
Trigger
Extends Pressable props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
TYPE: DropdownMenuTriggerRef
| Methods | args | Note |
|---|---|---|
| open | opens the dropdown menu | |
| close | closes the dropdown menu |
Portal
| Prop | Type | Note |
|---|---|---|
| children* | React.ReactNode | |
| forceMount | true | undefined | (optional) |
| hostName | string | Web Only (optional) |
| container | HTMLElement | null | undefined | Web Only (optional) |
Overlay
Extends Pressable props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| forceMount | true | undefined; | (optional) |
Content
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| forceMount | true | undefined | (optional) |
| alignOffset | number | (optional) |
| insets | Insets | (optional) |
| avoidCollisions | boolean | (optional) |
| align | ’start’ | ‘center’ | ‘end’ | (optional) |
| side | ’top’ | ‘bottom’ | (optional) |
| sideOffset | number | (optional) |
| disablePositioningStyle | boolean | Native Only (optional) |
| loop | boolean | Web Only (optional) |
| onCloseAutoFocus | (event: Event) => void | Web Only (optional) |
| onEscapeKeyDown | (event: KeyboardEvent) => void | Web Only (optional) |
| onPointerDownOutside | (event: PointerDownOutsideEvent) => void | Web Only (optional) |
| onFocusOutside | (event: FocusOutsideEvent) => void | Web Only (optional) |
| onInteractOutside | PointerDownOutsideEvent | FocusOutsideEvent | Web Only (optional) |
| collisionBoundary | Element | null | Array<Element | null> | Web Only (optional) |
| sticky | ’partial’ | ‘always’ | Web Only (optional) |
| hideWhenDetached | boolean | Web Only (optional) |
Group
Extends Text props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Label
Extends Text props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Item
Extends Pressable props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| textValue | boolean | (optional) |
| closeOnPress | boolean | (optional) |
CheckboxItem
Extends Pressable props
| Prop | Type | Note |
|---|---|---|
| checked* | boolean | |
| onCheckedChange* | (value: boolean) => void | |
| textValue* | string | |
| asChild | boolean | (optional) |
| closeOnPress | boolean | Native Only_(optional)_ |
RadioGroup
Extends View props
| Prop | Type | Note |
|---|---|---|
| value* | boolean | |
| onValueChange* | (value: boolean) => void | |
| asChild | boolean | (optional) |
RadioItem
Extends Pressable props
| Prop | Type | Note |
|---|---|---|
| value* | boolean | |
| onCheckedChange* | (value: boolean) => void | |
| asChild | boolean | (optional) |
| closeOnPress | boolean | Native Only_(optional)_ |
ItemIndicator
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| forceMount | true / | undefined |
Separator
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| decorative | boolean | (optional) |
Sub
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| defaultOpen | boolean | (optional) |
| open | boolean | (optional) |
| onOpenChange | (value: boolean) => void | (optional) |
SubTrigger
Extends Pressable props
| Prop | Type | Note |
|---|---|---|
| textValue | string | (optional) |
| asChild | boolean | (optional) |
SubContent
Extends Pressable props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| forceMount | true / | undefined |
useRootContext
Must be used within a Root component. It provides the following values from the dropdown menu: open, and onOpenChange.
useSubContext
Must be used within a Sub component. It provides the following values from the dropdown menu: open, and onOpenChange.