Dropdown Menu

Stable

Radix UI-backed action menus supporting keyboard arrow navigation, nested submenus, stateful checkboxes, and cybernetic neon/glass themes.

Installation

$pnpm add @siberui/react

Import

tsx
import { 
  DropdownMenu, 
  DropdownMenuTrigger, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuLabel, 
  DropdownMenuSeparator, 
  DropdownMenuGroup, 
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
} from '@siberui/react';

Basic Usage & Keyboard Shortcuts

DropdownMenu anchors to the trigger button and provides keyboard navigation with arrow keys and shortcut glyphs.

tsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="secondary">OPERATOR ACCOUNT</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>Operator Dossier</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <User className="mr-2 h-4 w-4" />
        <span>Profile Details</span>
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Settings className="mr-2 h-4 w-4" />
        <span>Subsystem Config</span>
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-rose-400 focus:text-rose-300 focus:bg-rose-500/10">
      <LogOut className="mr-2 h-4 w-4" />
      <span>Terminate Session</span>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Neon Cybernetic Menu & Submenus

Pass variant="neon" to apply cyan laser outlines and nesting submenus.

tsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="neon" glow leftIcon={<Terminal className="mr-2 w-4 h-4" />}>
      CLUSTER COMMANDS
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent variant="neon" className="w-52">
    <DropdownMenuLabel variant="neon">CORE_ROUTINES</DropdownMenuLabel>
    <DropdownMenuSeparator variant="neon" />
    <DropdownMenuItem variant="neon">INITIATE_PING</DropdownMenuItem>
    <DropdownMenuItem variant="neon">PURGE_BUFFER</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger variant="neon">ORBITAL_PODS</DropdownMenuSubTrigger>
      <DropdownMenuSubContent variant="neon">
        <DropdownMenuItem variant="neon">POD_ALPHA_01</DropdownMenuItem>
        <DropdownMenuItem variant="neon">POD_BETA_02</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>

Checkbox & Radio Selection Items

Support toggles and mutual exclusions via DropdownMenuCheckboxItem and DropdownMenuRadioGroup.

tsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="secondary" leftIcon={<SlidersHorizontal className="h-4 w-4" />}>
      TELEMETRY PREFERENCES
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-60">
    <DropdownMenuLabel>ACTIVE SENSORS</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem checked={showTelemetry} onCheckedChange={setShowTelemetry}>
      Realtime Packet Feed
    </DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem checked={showAirgap} onCheckedChange={setShowAirgap}>
      Air-Gapped Proxy Tunnel
    </DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuLabel>POST-QUANTUM CIPHER</DropdownMenuLabel>
    <DropdownMenuRadioGroup value={cipherCurve} onValueChange={setCipherCurve}>
      <DropdownMenuRadioItem value="kyber">Kyber-1024</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="dilithium">Dilithium-5</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
  </DropdownMenuContent>
</DropdownMenu>

Frosted Cyber-Glass Action Menu

Composite dropdown menus with translucent acrylic blur over circuit substrate grids.

tsx
<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col items-center justify-center">
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant="glass">OPEN GLASS ACTIONS</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent variant="glass" className="w-52">
      <DropdownMenuLabel>QUICK TELEMETRY</DropdownMenuLabel>
      <DropdownMenuSeparator variant="glass" />
      <DropdownMenuItem>Carrier Frequency</DropdownMenuItem>
      <DropdownMenuItem>Laser Pulse Rate</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Mission Command Menu Card

Composite mission defense card with action triggers.

MISSION DISPATCH ACTIONS

READY

Trigger remote automated routines on deployed orbital sentinels.

tsx
<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">MISSION DISPATCH ACTIONS</CardTitle>
      <Badge variant="neon" size="sm">READY</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Trigger remote automated routines on deployed orbital sentinels.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6">
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="neon" glow className="w-full">
          SELECT SATELLITE ACTION
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent variant="neon" className="w-64">
        <DropdownMenuLabel variant="neon">ROUTINE DISPATCH</DropdownMenuLabel>
        <DropdownMenuSeparator variant="neon" />
        <DropdownMenuItem variant="neon">CALIBRATE_OPTICAL_GRID</DropdownMenuItem>
        <DropdownMenuItem variant="neon">REORIENT_ARRAY_30_DEG</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </CardContent>
</Card>

API Reference

PROPERTIES (2)← swipe to inspect →
PropertyDescriptionTypeDefault
variant
Visual theme for Content, Items, Separators, and SubContent.
"default" | "neon" | "glass"
"default"
sideOffset
Distance in pixels from the anchor element.
number
4

Accessibility

  • W3C WAI-ARIA Menu: Conforms to Radix UI Dropdown Menu specifications, supporting full keyboard navigation (Up/Down arrows, Home/End, Enter, and typeahead character searching).

Best Practices

  • Separators & Labels: Group related action items with DropdownMenuLabel and DropdownMenuSeparator to maintain clean visual rhythm.