A floating toolbar component for actions, navigation, and menus. Designed to work with Stack navigation and supports placement at the top or bottom of the screen. Uses Radix UI Toolbar and Dropdown Menu primitives on web.

Installation

npm

yarn

pnpm

bun

npm install @radix-ui/react-toolbar @radix-ui/react-dropdown-menu

Copy

Usage

import Stack from "@/components/layout/stack"; // Using as Stack.Toolbar <Stack.Toolbar placement="bottom"> <Stack.ToolbarButton icon="house" onPress={() => {}} /> <Stack.ToolbarSeparator /> <Stack.ToolbarButton icon="gear">Settings</Stack.ToolbarButton> </Stack.Toolbar> // Or import directly import { Toolbar } from "@/components/layout/toolbar"; <Toolbar placement="bottom"> <Toolbar.Button icon="house" onPress={() => {}} /> </Toolbar>

Copy

Examples

Basic Toolbar

A simple toolbar with icon buttons.

Basic Toolbar

View Code

Copy

Toolbar with Labels

Buttons can include text labels alongside icons.

Toolbar with Labels

View Code

Copy

Toolbar with Menu

Include dropdown menus for additional actions.

Toolbar with Menu

View Code

Copy

Menu with Checkbox Items

Menus can include checkbox items for toggleable options.

Checkbox Menu Items

View Code

Copy

Menu with Radio Items

Use radio groups for mutually exclusive options.

Radio Menu Items

View Code

Copy

Submenu

Menus can contain nested submenus.

Submenu

View Code

Copy

Toolbar with Links

Use Toolbar.Link for navigation actions.

Toolbar with Links

View Code

Copy

Active State

Buttons can show an active/selected state.

Active State

View Code

Copy

With Stack Integration

Use Stack.Toolbar to add a toolbar to your stack screens.

import Stack from "@/components/layout/stack"; export default function Layout() { return ( <Stack> <Stack.Screen name="index" /> </Stack> ); } // In your screen component: function HomeScreen() { return ( <View className="flex-1"> <Text>Content</Text> <Stack.Toolbar placement="bottom"> <Stack.ToolbarButton icon="house" /> <Stack.ToolbarButton icon="magnifyingglass" /> <Stack.ToolbarSpacer /> <Stack.ToolbarMenu icon="ellipsis"> <Stack.ToolbarMenuItem>Settings</Stack.ToolbarMenuItem> </Stack.ToolbarMenu> </Stack.Toolbar> </View> ); }

Copy

API Reference

Toolbar

The root container for toolbar items.

Prop

Type

Default

Description

placement

"top" | "bottom" | "relative"

"bottom"

Position of the toolbar - 'bottom' for fixed bottom bar, 'top' for header integration, 'relative' for inline use

children

ReactNode

Toolbar content (buttons, menus, separators)

className

string

Additional CSS classes

Toolbar.Button

An interactive button in the toolbar.

Prop

Type

Default

Description

icon

string

SF Symbol icon name

children

ReactNode

Button label text

onPress

() => void

Called when the button is pressed

active

boolean

false

Whether the button appears selected/active

disabled

boolean

false

Whether the button is disabled

className

string

Additional CSS classes

Toolbar.Link

A toolbar button that navigates to a route.

Prop

Type

Default

Description

href*

string

The route to navigate to

icon

string

SF Symbol icon name

children

ReactNode

Link label text

active

boolean

Whether the link appears selected

disabled

boolean

Whether the link is disabled

Toolbar.Separator

A visual divider between toolbar items.

Prop

Type

Default

Description

className

string

Additional CSS classes

Toolbar.Spacer

A flexible spacer that pushes items apart.

Prop

Type

Default

Description

className

string

Additional CSS classes

Toolbar.Menu

A dropdown menu in the toolbar.

Prop

Type

Default

Description

icon

string

"ellipsis"

SF Symbol icon for the trigger button

label

string

Text label for the trigger button

trigger

ReactNode

Custom trigger element (overrides icon/label)

children

ReactNode

Menu items

open

boolean

Controlled open state

onOpenChange

(open: boolean) => void

Called when open state changes

align

"start" | "center" | "end"

"center"

Menu alignment relative to trigger

side

"top" | "bottom" | "left" | "right"

"top"

Which side of the trigger the menu appears

Toolbar.MenuItem

An item in the toolbar menu.

Prop

Type

Default

Description

icon

string

SF Symbol icon name

children

ReactNode

Item label text

onSelect

() => void

Called when the item is selected

destructive

boolean

Whether this is a destructive action (shows in red)

disabled

boolean

Whether the item is disabled

shortcut

string

Keyboard shortcut hint

Toolbar.MenuSeparator

A divider between menu items.

Toolbar.MenuLabel

A non-interactive label in a menu.

Prop

Type

Default

Description

children

ReactNode

Label text

Toolbar.MenuCheckboxItem

A toggleable checkbox item in a menu.

Prop

Type

Default

Description

checked

boolean

Whether the item is checked

onCheckedChange

(checked: boolean) => void

Called when checked state changes

children

ReactNode

Item label

disabled

boolean

Whether the item is disabled

Toolbar.MenuRadioGroup

A group of mutually exclusive radio items.

Prop

Type

Default

Description

value

string

The selected value

onValueChange

(value: string) => void

Called when the value changes

children

ReactNode

Radio items

Toolbar.MenuRadioItem

A radio item within a radio group.

Prop

Type

Default

Description

value*

string

The value of this item

children

ReactNode

Item label

disabled

boolean

Whether the item is disabled

Toolbar.MenuSub

A submenu within a menu.

Prop

Type

Default

Description

trigger*

ReactNode

The submenu trigger text

icon

string

SF Symbol icon for the trigger

children

ReactNode

Submenu items

disabled

boolean

Whether the submenu is disabled

Platform Differences

Native (iOS)

On iOS, the native toolbar is rendered by the native stack navigator
This component is a no-op on iOS - use the native headerRight/headerLeft options instead
Future versions will integrate with Expo Router v7's toolbar API

Web

Full implementation using Radix UI primitives
Floating pill-style toolbar with backdrop blur
Responsive to sidebar state from TabBarController
Supports keyboard navigation and focus management
Smooth animations for menu open/close

Android

Currently renders as no-op (same as iOS)
Future versions will render a bottom toolbar similar to web

Accessibility

Full keyboard navigation support on web
Arrow keys to navigate between items
Enter/Space to activate buttons and menu items
Escape to close menus
Focus trap when menu is open
Screen reader announcements for menu state changes