# Workspace switcher dropdown menu

> Workspace switcher dropdown menu

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-dropdown-menu-10).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-dropdown-menu-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-dropdown-menu-10-light-dd696586c72527df.png
- Registry item: https://reui.io/r/new-york-v4/c-dropdown-menu-10.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-dropdown-menu-10.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `avatar`, `button`, `dropdown-menu`

## Files

### `c-dropdown-menu-10.tsx`

```tsx
"use client"

import { ReactNode, useState } from "react"

import { AnthropicBlack } from "@/components/ui/svgs/anthropicBlack"
import { AnthropicWhite } from "@/components/ui/svgs/anthropicWhite"
import { ClaudeAiIcon } from "@/components/ui/svgs/claudeAiIcon"
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

interface Workspace {
  id: string
  name: string
  plan: string
  avatar?: string
  logo?: ReactNode
  logoDark?: ReactNode
}

const workspaces: Workspace[] = [
  {
    id: "1",
    name: "Anthropic",
    plan: "Enterprise",
    logo: <AnthropicBlack />,
    logoDark: <AnthropicWhite />,
  },
  {
    id: "2",
    name: "Claude",
    plan: "Pro",
    logo: <ClaudeAiIcon />,
  },
  {
    id: "3",
    name: "Alex Wong",
    plan: "Team",
    avatar:
      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80",
  },
]

export function Pattern() {
  const [activeWorkspaceId, setActiveWorkspaceId] = useState(workspaces[1].id)
  const activeWorkspace =
    workspaces.find((w) => w.id === activeWorkspaceId) || workspaces[0]

  return (
    <div className="flex items-center justify-center">
      <DropdownMenu>
        <DropdownMenuTrigger
          render={<Button variant="outline" className="w-52" />}
        >
          <div className="gap-1.5 flex items-center">
            {activeWorkspace.logo}
            <span className="text-sm font-medium">{activeWorkspace.name}</span>
          </div>

          <IconPlaceholder
            lucide="ChevronsUpDownIcon"
            tabler="IconSelector"
            hugeicons="UnfoldMoreIcon"
            phosphor="CaretUpDownIcon"
            remixicon="RiExpandUpDownLine"
            className="ml-auto size-3.5 opacity-60"
            aria-hidden="true"
          />
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56" align="start" sideOffset={8}>
          <DropdownMenuGroup>
            <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
            {workspaces.map((workspace) => (
              <DropdownMenuItem
                key={workspace.id}
                className="gap-3"
                onSelect={() => setActiveWorkspaceId(workspace.id)}
              >
                {/* Workspace logo (dark mode) */}
                {workspace.logoDark ? (
                  <>
                    <span aria-hidden className="dark:hidden">
                      {workspace.logo}
                    </span>
                    <span aria-hidden className="hidden dark:block">
                      {workspace.logoDark}
                    </span>
                  </>
                ) : (
                  workspace.logo && workspace.logo
                )}

                {workspace.avatar && (
                  <Avatar className="size-4">
                    <AvatarImage src={workspace.avatar} alt={workspace.name} />
                    <AvatarFallback>{workspace.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                )}

                {/* Workspace name and plan */}
                <div className="flex flex-1 flex-col">
                  <span className="text-sm font-medium">{workspace.name}</span>
                  <span className="text-muted-foreground text-xs">
                    {workspace.plan}
                  </span>
                </div>

                {/* Check icon */}
                {activeWorkspaceId === workspace.id && (
                  <IconPlaceholder
                    lucide="CheckIcon"
                    tabler="IconCheck"
                    hugeicons="Tick02Icon"
                    phosphor="CheckIcon"
                    remixicon="RiCheckLine"
                    className="text-primary size-4"
                    aria-hidden="true"
                  />
                )}
              </DropdownMenuItem>
            ))}
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <IconPlaceholder
                lucide="PlusIcon"
                tabler="IconPlus"
                hugeicons="PlusSignIcon"
                phosphor="PlusIcon"
                remixicon="RiAddLine"
                aria-hidden="true"
              />
              Create Workspace
            </DropdownMenuItem>
            <DropdownMenuItem>
              <IconPlaceholder
                lucide="SettingsIcon"
                tabler="IconSettings"
                hugeicons="SettingsIcon"
                phosphor="GearIcon"
                remixicon="RiSettings3Line"
                aria-hidden="true"
              />
              Manage Workspaces
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}
```

### `anthropicBlack.tsx`

```tsx
import type { SVGProps } from "react";

const AnthropicBlack = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    fillRule="evenodd"
    style={{ flex: "none", lineHeight: "1" }}
    viewBox="0 0 24 24"
  >
    <title>Anthropic</title>
    <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z" />
  </svg>
);

export { AnthropicBlack };
```

### `anthropicWhite.tsx`

```tsx
import type { SVGProps } from "react";

const AnthropicWhite = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    fill="#ffff"
    fillRule="evenodd"
    style={{ flex: "none", lineHeight: "1" }}
    viewBox="0 0 24 24"
  >
    <title>Anthropic</title>
    <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z" />
  </svg>
);

export { AnthropicWhite };
```

### `claudeAiIcon.tsx`

```tsx
import type { SVGProps } from "react";

const ClaudeAiIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 257">
    <path
      fill="#D97757"
      d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"
    />
  </svg>
);

export { ClaudeAiIcon };
```