App Switcher Navigation Bar

Application-focused navigation bar with team switcher, central app toggle, and action buttons. Features searchable team selection, grid-based app switching, and export/upgrade functionality for multi-application platforms.

Lucide React

Loading component...

'use client';import * as React from 'react';import { SparklesIcon, UploadIcon } from 'lucide-react';import AppToggle from './AppToggle';import TeamSwitcher from './TeamSwitcher';import { Button } from '@/components/ui/button';import { cn } from '@/lib/utils';// Typesexport interface Navbar16Props extends React.HTMLAttributes<HTMLElement> {  teams?: string[];  defaultTeam?: string;  currentApp?: string;  apps?: Array<{    id: string;    name: string;    description?: string;    icon?: React.ReactNode;  }>;  exportButtonText?: string;  upgradeButtonText?: string;  onTeamChange?: (team: string) => void;  onAppChange?: (appId: string) => void;  onExportClick?: () => void;  onUpgradeClick?: () => void;}// Default teamsconst defaultTeams = ['shadcn/ui', 'Acme Inc.', 'Origin UI'];export const Navbar16 = React.forwardRef<HTMLElement, Navbar16Props>(  (    {      className,      teams = defaultTeams,      defaultTeam = teams[0],      currentApp = 'dashboard',      apps,      exportButtonText = 'Export',      upgradeButtonText = 'Upgrade',      onTeamChange,      onAppChange,      onExportClick,      onUpgradeClick,      ...props    },    ref  ) => {    return (      <header        ref={ref}        className={cn(          'border-b px-4 md:px-6 [&_*]:no-underline',          className        )}        {...props}      >        <div className="flex h-16 items-center justify-between gap-4">          {/* Left side */}          <div className="flex flex-1 items-center gap-2">            <TeamSwitcher               teams={teams}               defaultTeam={defaultTeam}               onTeamChange={onTeamChange}            />          </div>          {/* Middle area */}          <AppToggle             apps={apps}            currentApp={currentApp}            onAppChange={onAppChange}          />          {/* Right side */}          <div className="flex flex-1 items-center justify-end gap-2">            <Button              size="sm"              variant="ghost"              className="text-sm max-sm:aspect-square max-sm:p-0"              onClick={(e) => {                e.preventDefault();                if (onExportClick) onExportClick();              }}            >              <UploadIcon                className="opacity-60 sm:-ms-1"                size={16}                aria-hidden="true"              />              <span className="max-sm:sr-only">{exportButtonText}</span>            </Button>            <Button               size="sm"               className="text-sm max-sm:aspect-square max-sm:p-0"              onClick={(e) => {                e.preventDefault();                if (onUpgradeClick) onUpgradeClick();              }}            >              <SparklesIcon                className="opacity-60 sm:-ms-1"                size={16}                aria-hidden="true"              />              <span className="max-sm:sr-only">{upgradeButtonText}</span>            </Button>          </div>        </div>      </header>    );  });Navbar16.displayName = 'Navbar16';export { AppToggle, TeamSwitcher };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/navbar-16.json

npx shadcn@latest add https://www.shadcn.io/registry/navbar-16.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/navbar-16.json

bunx shadcn@latest add https://www.shadcn.io/registry/navbar-16.json

Features

Team switcher with searchable command palette interface for team selection
Central app toggle with grid layout showing available applications and descriptions
Application grid displaying apps in 2-column layout with names and descriptions
Current app indicator with visual highlight bar for active application
Export functionality with upload icon and responsive design
Upgrade button with sparkles icon and prominent styling
Responsive layout with icon-only buttons on mobile devices
TypeScript support with comprehensive interfaces for teams and applications

Use Cases

This free open source React component works well for:

Multi-app platforms - Software suites with multiple applications and team workspaces using Next.js
Enterprise dashboards - Business tools with team-based access and application switching using TypeScript
SaaS platforms - Multi-tenant applications with team management and feature upgrading using Tailwind CSS
Workspace applications - Collaborative tools with team selection and app navigation

API Reference

Navbar16

Prop	Type	Default	Description
`teams`	`string[]`	`defaultTeams`	Array of available team names
`defaultTeam`	`string`	`teams[0]`	Default selected team
`currentApp`	`string`	`"dashboard"`	Currently active application identifier
`apps`	`AppOption[]`	`defaultApps`	Array of available applications
`exportButtonText`	`string`	`"Export"`	Text label for export button
`upgradeButtonText`	`string`	`"Upgrade"`	Text label for upgrade button
`onTeamChange`	`(team: string) => void`	`undefined`	Callback for team selection changes
`onAppChange`	`(appId: string) => void`	`undefined`	Callback for application selection changes
`onExportClick`	`() => void`	`undefined`	Callback for export button clicks
`onUpgradeClick`	`() => void`	`undefined`	Callback for upgrade button clicks

Application Interface

interface AppOption {
  id: string;            // Unique identifier for the application
  name: string;          // Display name of the application
  description?: string;  // Optional description text
  icon?: React.ReactNode; // Optional icon component
}

Team Selection Features

Searchable Interface - Command palette with search functionality for team discovery
Keyboard Navigation - Full keyboard support for team selection
Visual Feedback - Check icon for currently selected team
Responsive Design - Consistent width and positioning across screen sizes

App Switching Features

Grid Layout - 2-column grid displaying available applications
Rich Information - Application names with optional descriptions
Current App Highlight - Visual indicator bar for active application
Icon Support - Optional icon display for each application
Center Positioning - Central placement emphasizing app switching functionality

Action Buttons

Export Functionality - Ghost variant button with upload icon
Upgrade Promotion - Primary button with sparkles icon for feature upgrading
Responsive Text - Text hidden on mobile with screen reader support
Icon Positioning - Proper icon spacing and opacity for visual hierarchy

Implementation Notes

Uses shadcn/ui Command component for searchable team selection interface
App toggle uses DropdownMenu with grid layout for organized application display
Current app indication uses primary color bar for clear visual feedback
Export and upgrade buttons include proper responsive design patterns
All interactive elements include preventDefault with callback support
Compatible with shadcn/ui design system and Tailwind CSS styling framework
Team switcher supports keyboard navigation and accessibility standards
App grid layout provides clear visual separation between application options

App Switcher Navigation Bar

Reactnavbar-16

On this page