Component

Dropdown Menu

A raised white menu of 36px rows with filled glyphs, lilac highlight, purple section labels and checks.

Text reference

npx -y github:anwarlemu/inkbox-brand-cli#release add dropdown-menu

Preview

Open

Row actions

Options

Usage

Use for actions on one thing behind a single control (an agent's row actions, the account menu), and for small option sets with DropdownMenuCheckboxItem or DropdownMenuRadioItem. Mark a destructive action with variant="destructive" and keep it last, after a separator.

Avoid

Navigation between pages in a dropdown
More than one level of submenu
Animating the highlighted row
Icons that move on hover

Exports: DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger. This component is a client component.

Dependencies: surface, radix-ui, @phosphor-icons/react.

Example

examples/dropdown-menu.tsx

1"use client";23import * as React from "react";4import { BuildingsIcon, DotsThreeIcon, GearSixIcon, KeyIcon, PencilSimpleIcon, QuestionIcon, SignOutIcon, TrashIcon, UsersThreeIcon } from "@phosphor-icons/react/ssr";56import { Button } from "@/components/ui/button";7import {8  DropdownMenu,9  DropdownMenuCheckboxItem,10  DropdownMenuContent,11  DropdownMenuGroup,12  DropdownMenuItem,13  DropdownMenuLabel,14  DropdownMenuRadioGroup,15  DropdownMenuRadioItem,16  DropdownMenuSeparator,17  DropdownMenuShortcut,18  DropdownMenuSub,19  DropdownMenuSubContent,20  DropdownMenuSubTrigger,21  DropdownMenuTrigger,22} from "@/components/ui/dropdown-menu";2324function AccountItems() {25  return (26    <>27      <DropdownMenuLabel>Robert Ligthart</DropdownMenuLabel>28      <DropdownMenuGroup>29        <DropdownMenuItem>30          <BuildingsIcon weight="fill" />31          My Organisation32          <DropdownMenuShortcut>⇧⌘O</DropdownMenuShortcut>33        </DropdownMenuItem>34        <DropdownMenuItem>35          <KeyIcon weight="fill" />36          API Keys37          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>38        </DropdownMenuItem>39        <DropdownMenuSub>40          <DropdownMenuSubTrigger>41            <UsersThreeIcon weight="fill" />42            Invite people43          </DropdownMenuSubTrigger>44          <DropdownMenuSubContent>45            <DropdownMenuItem>By email</DropdownMenuItem>46            <DropdownMenuItem>Copy invite link</DropdownMenuItem>47          </DropdownMenuSubContent>48        </DropdownMenuSub>49        <DropdownMenuItem>50          <GearSixIcon weight="fill" />51          Settings52        </DropdownMenuItem>53      </DropdownMenuGroup>54      <DropdownMenuSeparator />55      <DropdownMenuItem>56        <QuestionIcon weight="fill" />57        Help58      </DropdownMenuItem>59      <DropdownMenuItem disabled>Billing (admins only)</DropdownMenuItem>60      <DropdownMenuSeparator />61      <DropdownMenuItem variant="destructive">62        <SignOutIcon weight="fill" />63        Log out64      </DropdownMenuItem>65    </>66  );67}6869export function Preview() {70  return (71    <div className="flex justify-center">72      <DropdownMenu>73        <DropdownMenuTrigger asChild>74          <Button variant="outline">Account</Button>75        </DropdownMenuTrigger>76        <DropdownMenuContent align="start" className="w-60">77          <AccountItems />78        </DropdownMenuContent>79      </DropdownMenu>80    </div>81  );82}8384export function Open() {85  return (86    <div className="flex min-h-110 items-start justify-center">87      <DropdownMenu defaultOpen>88        <DropdownMenuTrigger asChild>89          <Button variant="outline">Account</Button>90        </DropdownMenuTrigger>91        <DropdownMenuContent className="w-60">92          <AccountItems />93        </DropdownMenuContent>94      </DropdownMenu>95    </div>96  );97}9899export function RowActions() {100  return (101    <div className="flex justify-center">102      <DropdownMenu>103        <DropdownMenuTrigger asChild>104          <Button variant="ghost" size="icon" aria-label="Actions for @acme">105            <DotsThreeIcon weight="bold" />106          </Button>107        </DropdownMenuTrigger>108        <DropdownMenuContent align="end" className="w-48">109          <DropdownMenuItem>110            <PencilSimpleIcon weight="fill" />111            Edit agent112          </DropdownMenuItem>113          <DropdownMenuItem>114            <KeyIcon weight="fill" />115            Rotate API key116          </DropdownMenuItem>117          <DropdownMenuSeparator />118          <DropdownMenuItem variant="destructive">119            <TrashIcon weight="fill" />120            Delete agent121          </DropdownMenuItem>122        </DropdownMenuContent>123      </DropdownMenu>124    </div>125  );126}127128export function Options() {129  const [channels, setChannels] = React.useState({ email: true, phone: true, imessage: false });130  const [mode, setMode] = React.useState("edge");131  return (132    <div className="flex justify-center">133      <DropdownMenu>134        <DropdownMenuTrigger asChild>135          <Button variant="outline">Filter</Button>136        </DropdownMenuTrigger>137        <DropdownMenuContent className="w-56">138          <DropdownMenuLabel>Channels</DropdownMenuLabel>139          <DropdownMenuCheckboxItem checked={channels.email} onCheckedChange={(v) => setChannels((c) => ({ ...c, email: v === true }))}>140            Email141          </DropdownMenuCheckboxItem>142          <DropdownMenuCheckboxItem checked={channels.phone} onCheckedChange={(v) => setChannels((c) => ({ ...c, phone: v === true }))}>143            Phone144          </DropdownMenuCheckboxItem>145          <DropdownMenuCheckboxItem checked={channels.imessage} onCheckedChange={(v) => setChannels((c) => ({ ...c, imessage: v === true }))}>146            iMessage147          </DropdownMenuCheckboxItem>148          <DropdownMenuSeparator />149          <DropdownMenuLabel>Tunnel TLS mode</DropdownMenuLabel>150          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>151            <DropdownMenuRadioItem value="edge">Edge (default)</DropdownMenuRadioItem>152            <DropdownMenuRadioItem value="passthrough">Passthrough</DropdownMenuRadioItem>153          </DropdownMenuRadioGroup>154        </DropdownMenuContent>155      </DropdownMenu>156    </div>157  );158}

Source

components/ui/dropdown-menu.tsx

1"use client";23import * as React from "react";4import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";5import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react/ssr";67import { usePortalContainer } from "@/lib/surface";8import { cn } from "@/lib/utils";910// A menu, extrapolated from the console (Figma 427:2715): the panel is a raised white panel (8px corners, the floating11// shadow) with 4px of padding; items are 36px rows with 8px corners like the rail's nav rows, a 20px glyph in the12// action-glyph purple 10px from a 14px ink label, and the lilac under the highlighted row. Section labels are 13px in13// the label purple ("Channels"), separators the rail's hairline, shortcuts 12px muted, destructive items red. The14// panel grows out of its trigger from 96 percent with a fade; highlighting a row is instant (menus are used by keyboard15// and many times a day).16const CONTENT =17  "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-control bg-surface p-1 text-fg shadow-floating outline-none data-[state=closed]:animate-pop-out data-[state=open]:animate-pop-in";18const ITEM =19  "relative flex h-9 cursor-default items-center gap-2.5 rounded-control px-2.5 font-sans text-body leading-tight text-fg outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-subtle data-[inset]:pl-10.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5.5 [&_svg:not([class*='text-'])]:text-icon-secondary";2021function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {22  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;23}2425function DropdownMenuPortal(props: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {26  const container = usePortalContainer();27  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" container={container} {...props} />;28}2930function DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {31  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;32}3334function DropdownMenuContent({ className, sideOffset = 6, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {35  return (36    <DropdownMenuPortal>37      <DropdownMenuPrimitive.Content data-slot="dropdown-menu-content" sideOffset={sideOffset} className={cn(CONTENT, "origin-(--radix-dropdown-menu-content-transform-origin)", className)} {...props} />38    </DropdownMenuPortal>39  );40}4142function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {43  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;44}4546function DropdownMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive" }) {47  return (48    <DropdownMenuPrimitive.Item49      data-slot="dropdown-menu-item"50      data-inset={inset || undefined}51      data-variant={variant}52      className={cn(ITEM, "data-[variant=destructive]:text-danger data-[variant=destructive]:[&_svg]:text-danger", className)}53      {...props}54    />55  );56}5758function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {59  return (60    <DropdownMenuPrimitive.CheckboxItem data-slot="dropdown-menu-checkbox-item" checked={checked} className={cn(ITEM, "pl-10.5", className)} {...props}>61      <span className="pointer-events-none absolute left-2.5 flex size-5.5 items-center justify-center">62        <DropdownMenuPrimitive.ItemIndicator>63          <CheckIcon weight="bold" className="size-4.5 text-fg-brand" />64        </DropdownMenuPrimitive.ItemIndicator>65      </span>66      {children}67    </DropdownMenuPrimitive.CheckboxItem>68  );69}7071function DropdownMenuRadioGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {72  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;73}7475// The selected choice wears the console's radio mark: a pink ring around white.76function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {77  return (78    <DropdownMenuPrimitive.RadioItem data-slot="dropdown-menu-radio-item" className={cn(ITEM, "pl-10.5", className)} {...props}>79      <span className="pointer-events-none absolute left-2.5 flex size-5.5 items-center justify-center">80        <DropdownMenuPrimitive.ItemIndicator>81          <span className="block size-3.5 rounded-pill border-[3.5px] border-pink bg-surface" />82        </DropdownMenuPrimitive.ItemIndicator>83      </span>84      {children}85    </DropdownMenuPrimitive.RadioItem>86  );87}8889function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }) {90  return <DropdownMenuPrimitive.Label data-slot="dropdown-menu-label" data-inset={inset || undefined} className={cn("px-2.5 pt-2 pb-1 font-sans text-body-sm leading-tight text-fg-label data-[inset]:pl-10.5", className)} {...props} />;91}9293function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {94  return <DropdownMenuPrimitive.Separator data-slot="dropdown-menu-separator" className={cn("-mx-1 my-1 h-px bg-line-subtle", className)} {...props} />;95}9697function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {98  return <span data-slot="dropdown-menu-shortcut" className={cn("ml-auto pl-4 font-sans text-caption text-fg-muted", className)} {...props} />;99}100101function DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {102  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;103}104105function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }) {106  return (107    <DropdownMenuPrimitive.SubTrigger data-slot="dropdown-menu-sub-trigger" data-inset={inset || undefined} className={cn(ITEM, "data-[state=open]:bg-subtle", className)} {...props}>108      {children}109      <CaretRightIcon className="ml-auto size-4.5 text-fg-muted" />110    </DropdownMenuPrimitive.SubTrigger>111  );112}113114function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {115  return (116    <DropdownMenuPortal>117      <DropdownMenuPrimitive.SubContent data-slot="dropdown-menu-sub-content" className={cn(CONTENT, "max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin)", className)} {...props} />118    </DropdownMenuPortal>119  );120}121122export {123  DropdownMenu,124  DropdownMenuCheckboxItem,125  DropdownMenuContent,126  DropdownMenuGroup,127  DropdownMenuItem,128  DropdownMenuLabel,129  DropdownMenuPortal,130  DropdownMenuRadioGroup,131  DropdownMenuRadioItem,132  DropdownMenuSeparator,133  DropdownMenuShortcut,134  DropdownMenuSub,135  DropdownMenuSubContent,136  DropdownMenuSubTrigger,137  DropdownMenuTrigger,138};

Reference: Extrapolated from the Inkbox console (Figma 427:2715): nav rows (38px, 8px corners, filled glyphs, lilac current row), section labels (Channels), the raised panel.