AppSwitcher

AppSwitcher presents a small product-suite menu for navigating between apps or modules without making the primary navigation carry every destination.

#Default usage

<AppSwitcher
  defaultValue="docs"
  apps={[
    { id: "docs", name: "Docs", description: "Component guidance", icon: "D" },
    { id: "tokens", name: "Tokens", description: "Theme variables", icon: "T" },
    { id: "admin", name: "Admin", description: "Workspace settings", icon: "A" },
    { id: "reports", name: "Reports", description: "Usage and quality", icon: "R" },
  ]}
/>

#Import

import { AppSwitcher } from "@froggdesign/enter-ui-react";

#Controlled

<AppSwitcher
  value={appId}
  onValueChange={setAppId}
  apps={apps}
/>

#Patterns

Use AppSwitcher for product suites, admin modules, workspace modes, or companion apps. Pass href on items when selection should navigate.

#Accessibility

The trigger is labelled "Switch app". Items are DropdownMenuItem entries, so keyboard navigation, disabled state, and menu focus behavior come from the existing dropdown primitive.

#API

• apps: { id, name, description?, icon?, href?, disabled? }[].
• value: controlled active app id.
• defaultValue: initial app id.
• onValueChange: called with the selected app id.
• disabled: disables the trigger.

#Styling

AppSwitcher uses .eui-app-switcher classes and FroggDesign tokens for layout, state, focus, and disabled styling.