ACTIONS · COMPONENT

Dropdown menu

Keep contextual project actions close at hand.

@raydenui/ui 0.10.1React + TypeScript

Loading the real component…

"use client";
import { useState } from "react";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from "@raydenui/ui";
import "@raydenui/ui/styles.css";

export default function Example({ state = "default" }: { state?: string }) {
  const [action, setAction] = useState("Choose a project action.");
  return <div style={{ minHeight: 320, width: 300 }}>
    <DropdownMenu defaultOpen={state === "open"}>
      <DropdownMenuTrigger>Project actions ↓</DropdownMenuTrigger>
      <DropdownMenuContent><DropdownMenuLabel>Workspace project</DropdownMenuLabel>
        <DropdownMenuItem onSelect={() => setAction("Demo project duplicated.")}>Duplicate project</DropdownMenuItem>
        <DropdownMenuItem onSelect={() => setAction("Demo link prepared.")}>Share project</DropdownMenuItem>
        <DropdownMenuItem destructive onSelect={() => setAction("Demo project archived. Reset to start again.")}>Archive project</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <p role="status" style={{ marginTop: 220 }}>{action}</p>
  </div>;
}

Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.

Made for real interfaces.

Compose a trigger, content, label, and menu items for contextual actions. The actions in this example update a local message; no project is changed outside the preview.

Try it

Open Project actions, choose Duplicate project, then reopen it and try keyboard navigation or Escape.

Dropdown menu

Made for real interfaces.

Try it

A few more possibilities.