Add Block Dropdown Menu

Component 9

About

A dropdown menu that lets users add a content block, listing options like text, quote, divider and headings each with an icon and description.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Add Block Dropdown Menu to your project and fits it to your theme.

Code

How Add Block Dropdown Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Heading1Icon,
  Heading2Icon,
  MinusIcon,
  PlusIcon,
  TextQuoteIcon,
  TypeIcon,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function DemoDropdownMenu() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center">
      <DropdownMenu defaultOpen>
        <DropdownMenuTrigger asChild>
          <Button
            aria-label="Open edit menu"
            className="rounded-full shadow-none"
            size="icon"
            variant="ghost"
          >
            <PlusIcon aria-hidden="true" size={16} />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="pb-2" align="start" sideOffset={8}>
          <DropdownMenuLabel>Add block</DropdownMenuLabel>
          <DropdownMenuItem>
            <div
              aria-hidden="true"
              className="flex size-8 items-center justify-center rounded-md border bg-background"
            >
              <TypeIcon className="opacity-60" size={16} />
            </div>
            <div>
              <div className="font-medium text-sm">Text</div>
              <div className="text-muted-foreground text-xs">
                Start writing with plain text
              </div>
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <div
              aria-hidden="true"
              className="flex size-8 items-center justify-center rounded-md border bg-background"
            >
              <TextQuoteIcon className="opacity-60" size={16} />
            </div>
            <div>
              <div className="font-medium text-sm">Quote</div>
              <div className="text-muted-foreground text-xs">
                Capture a quote
              </div>
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <div
              aria-hidden="true"
              className="flex size-8 items-center justify-center rounded-md border bg-background"
            >
              <MinusIcon className="opacity-60" size={16} />
            </div>
            <div>
              <div className="font-medium text-sm">Divider</div>
              <div className="text-muted-foreground text-xs">
                Visually divide blocks
              </div>
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <div
              aria-hidden="true"
              className="flex size-8 items-center justify-center rounded-md border bg-background"
            >
              <Heading1Icon className="opacity-60" size={16} />
            </div>
            <div>
              <div className="font-medium text-sm">Heading 1</div>
              <div className="text-muted-foreground text-xs">
                Big section heading
              </div>
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <div
              aria-hidden="true"
              className="flex size-8 items-center justify-center rounded-md border bg-background"
            >
              <Heading2Icon className="opacity-60" size={16} />
            </div>
            <div>
              <div className="font-medium text-sm">Heading 2</div>
              <div className="text-muted-foreground text-xs">
                Medium section subheading
              </div>
            </div>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}