App Switcher

The control at the top of a sidebar that names the current space and switches to another: a mark, a name, a plan stamp and a two-arrow glyph, opening a menu of the other spaces.

tsx

1import {
2  AppSwitcher,
3  AppSwitcherMenu,
4  AppSwitcherItem,
5  AppSwitcherFooter,
6} from "@pestoui/core"

Pass an AppSwitcherMenu as the child and the trigger becomes a dropdown. active marks the current space with a tick; AppSwitcherFooter holds actions below a separator.

Three sizes. With no children the switcher is a plain button — it does not claim a menu it cannot open.

Props

Prop	Type	Default	Description
label	ReactNode	—	On AppSwitcher and AppSwitcherItem. Required. The space's name; truncates.
mark	ReactNode	—	On AppSwitcher and AppSwitcherItem. Leading identity chip. Sized and clipped by its frame, so it needs no dimensions of its own.
plan	string	—	On AppSwitcher and AppSwitcherItem. A short plan stamp, rendered as a quiet badge.
size	"sm" \| "default" \| "lg"	"default"	On AppSwitcher. Padding, radius, mark size and text size.
srLabel	string	—	On AppSwitcher. Announced ahead of the name, for callers who want the action spelled out.
children	ReactNode	—	On AppSwitcher. An AppSwitcherMenu. Omit it and the trigger is a plain button.
AppSwitcherMenu label	ReactNode	—	On AppSwitcherMenu. Visible heading above the list.
align / sideOffset	"start" \| "center" \| "end" / number	"start" / 6	On AppSwitcherMenu. Placement against the trigger.
active	boolean	false	On AppSwitcherItem. Marks the current space.

PreviousApp Row Next Appearance Toggle

Pesto UI · 117 documented components

App Switcher

With a menu

Sizes, and no menu

Props