Skip to content

Navigation Menu Primitive

A collection of navigation links.

Installation

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/navigation-menu

Usage

import * as React from 'react';
import { Platform, StyleSheet, Pressable, Text } from 'react-native';
import * as NavigationMenuPrimitive from '@rn-primitives/navigation-menu';
function Example() {
const [value, setValue] = React.useState<string>();
function closeAll() {
setValue('');
}
// TODO: handle closing menus when pressing/clicking outside of this Example component. Ex: when navigating to another screen
return (
<>
{Platform.OS !== 'web' && !!value && (
<Pressable
onPress={closeAll}
style={StyleSheet.absoluteFillObject}
/>
)}
<NavigationMenuPrimitive.Root value={value} onValueChange={setValue}>
<NavigationMenuPrimitive.List>
<NavigationMenuPrimitive.Item value='getting-started'>
<NavigationMenuPrimitive.Trigger>
<Text>Getting started</Text>
</NavigationMenuPrimitive.Trigger>
<NavigationMenuPrimitive.Portal>
<NavigationMenuPrimitive.Content>
<NavigationMenuPrimitive.Link >
<Text>
react-native-reusables
</Text>
</NavigationMenuPrimitive.Link>
</NavigationMenuPrimitive.Content>
</ NavigationMenuPrimitive.Portal>
</NavigationMenuPrimitive.Item>
<NavigationMenuPrimitive.Item value='components'>
<NavigationMenuPrimitive.Trigger>
<Text>Components</Text>
</NavigationMenuPrimitive.Trigger>
<NavigationMenuPrimitive.Content>
<NavigationMenuPrimitive.Link>
Navigation Menu
</NavigationMenuPrimitive.Link>
</View>
</NavigationMenuPrimitive.Content>
</NavigationMenuPrimitive.Item>
<NavigationMenuPrimitive.Item value='documentation'>
<NavigationMenuPrimitive.Link onPress={closeAll}>
<Text>Documentation</Text>
</NavigationMenuPrimitive.Link>
</NavigationMenuPrimitive.Item>
</NavigationMenuPrimitive.List>
</NavigationMenuPrimitive.Root>
</>
);
}

Props

Root

Extends View props

PropTypeNote
value*boolean
onValueChange*(value: boolean) => void
asChildboolean(optional)
delayDurationnumberWeb only (optional)
skipDelayDurationnumberWeb only (optional)
dir’ltr’ | ‘rtl’Web only (optional)
orientation’horizontal’ | ‘vertical’Web only (optional)

List

Extends View props

PropTypeNote
asChildboolean(optional)

Item

Extends Pressable props

PropTypeNote
value*string
asChildboolean(optional)

Trigger

Extends Pressable props

PropTypeNote
asChildboolean(optional)

Portal

PropTypeNote
children*React.ReactNode
forceMounttrue | undefined(optional)
hostNamestringWeb Only (optional)
containerHTMLElement | null | undefinedWeb Only (optional)

Content

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined(optional)
alignOffsetnumberNative Only (optional)
insetsInsetsNative Only (optional)
avoidCollisionsbooleanNative Only (optional)
align’start’ | ‘center’ | ‘end’Native Only (optional)
side’top’ | ‘bottom’Native Only (optional)
sideOffsetnumberNative Only (optional)
disablePositioningStylebooleanNative Only (optional)
loopbooleanWeb Only (optional)
onEscapeKeyDown(event: KeyboardEvent) => voidWeb Only (optional)
onPointerDownOutside(event: PointerDownOutsideEvent) => voidWeb Only (optional)
onFocusOutside(event: FocusOutsideEvent) => voidWeb Only (optional)
onInteractOutsidePointerDownOutsideEvent | FocusOutsideEventWeb Only (optional)

Extends Pressable props

PropTypeNote
activeboolean(optional)
asChildboolean(optional)

Viewport

Should only be used for web

Extends View props except children

Indicator

Extends View props

useRootContext

Must be used within a Root component. It provides the following values from the navigation menu: value, and onValueChange.

useItemContext

Must be used within a Item component. It provides the following values from the navigation menu: value.