Help Dropdown Menu

Buttons 22

About

An icon-triggered dropdown menu with a labeled help section linking to documentation, support, and contact options.

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

Code

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

Usage.tsx

import {
  BookIcon,
  InfoIcon,
  LifeBuoyIcon,
  MessageCircleMoreIcon,
} from "lucide-react";

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

export default function Demo() {
  return (
    <div className="flex min-h-52 flex-col items-center justify-start pt-4">
      <DropdownMenu defaultOpen modal={false}>
        <DropdownMenuTrigger asChild>
          <Button
            aria-label="Open edit menu"
            className="rounded-full shadow-none"
            size="icon"
            variant="ghost"
          >
            <InfoIcon aria-hidden="true" size={16} />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="center" className="pb-2" sideOffset={6}>
          <DropdownMenuLabel>Need help?</DropdownMenuLabel>
          <DropdownMenuItem
            asChild
            className="cursor-pointer py-1 focus:bg-transparent focus:underline"
          >
            <a href="#">
              <BookIcon aria-hidden="true" className="opacity-60" size={16} />
              Documentation
            </a>
          </DropdownMenuItem>
          <DropdownMenuItem
            asChild
            className="cursor-pointer py-1 focus:bg-transparent focus:underline"
          >
            <a href="#">
              <LifeBuoyIcon
                aria-hidden="true"
                className="opacity-60"
                size={16}
              />
              Support
            </a>
          </DropdownMenuItem>
          <DropdownMenuItem
            asChild
            className="cursor-pointer py-1 focus:bg-transparent focus:underline"
          >
            <a href="#">
              <MessageCircleMoreIcon
                aria-hidden="true"
                className="opacity-60"
                size={16}
              />
              Contact us
            </a>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}