AceUi

Dropdown Menu

A fully customizable dropdown menu component with icons, external links, and action buttons for modern web applications.

The DropdownMenu component provides a flexible dropdown interface with icon support, customizable positioning, and action buttons , perfect for navigation menus, context menus, and user actions

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/dropdown-menu.json"

Usage

1import {
2List,
3Bookmark,
4DollarSign,
5Shield,
6MessageSquare,
7Briefcase,
8Plus,
9Settings,
10} from "lucide-react";
11import { DropdownMenu } from "@/components/ui/dropdown-menu";
12

13export default function DropdownExample() {
14const menuItems = [
15  { icon: List, label: "Lists", id: "lists" },
16  { icon: Bookmark, label: "Bookmarks", id: "bookmarks" },
17  { icon: DollarSign, label: "Monetization", id: "monetization" },
18  { icon: Shield, label: "Verified Orgs", id: "verified" },
19  { icon: MessageSquare, label: "Ads", id: "ads" },
20  { icon: Briefcase, label: "Jobs", id: "jobs" },
21  { icon: Plus, label: "Create your Space", id: "create-space" },
22  { icon: Settings, label: "Settings & Privacy", id: "settings" },
23];
24

25return (
26  <div className="min-h-screen bg-black text-white flex items-center justify-center px-4">
27    <div className="bg-neutral-900 rounded-2xl shadow-lg p-6 w-full max-w-md border border-neutral-700">
28      <h3 className="text-lg font-semibold mb-4 text-purple-400">Menu Example</h3>
29      <div className="flex justify-center">
30        <DropdownMenu
31          triggerText="Open Menu"
32          menuItems={menuItems}
33          buttonText="Continue"
34          buttonHref="/next-step"
35          position="left" // or "right"
36          width="w-64"
37          triggerClassName="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded"
38          itemClassName="hover:bg-purple-800 px-4 py-3 text-sm"
39        />
40      </div>
41    </div>
42  </div>
43);
44}

Variants

1// Basic dropdown
2<DropdownMenu 
3menuItems={[
4  { icon: User, label: "Profile", id: "profile" },
5  { icon: Settings, label: "Settings", id: "settings" }
6]}
7/>
8

9// Custom trigger
10<DropdownMenu 
11triggerIcon={Menu}
12triggerText="Navigation"
13menuItems={menuItems}
14/>
15

16// Different positions
17<DropdownMenu 
18position="right"
19menuItems={menuItems}
20/>
21

22<DropdownMenu 
23position="center"
24menuItems={menuItems}
25/>
26

27// Custom width
28<DropdownMenu 
29width="w-96"
30menuItems={menuItems}
31/>
32

33// External links
34<DropdownMenu 
35menuItems={[
36  { 
37    icon: ExternalLink, 
38    label: "Documentation", 
39    id: "docs", 
40    href: "https://docs.example.com",
41    external: true 
42  }
43]}
44/>
45

46// Disabled items
47<DropdownMenu 
48menuItems={[
49  { icon: User, label: "Profile", id: "profile" },
50  { icon: Settings, label: "Settings", id: "settings", disabled: true }
51]}
52/>
53

54// No action button
55<DropdownMenu 
56menuItems={menuItems}
57buttonText=""
58/>
59

60// Custom styling
61<DropdownMenu 
62className="custom-dropdown"
63triggerClassName="bg-blue-500 text-white hover:bg-blue-600"
64menuClassName="shadow-xl"
65itemClassName="hover:bg-blue-50"
66buttonClassName="bg-green-500 hover:bg-green-600"
67menuItems={menuItems}
68/>

Features

  • Support for internal and external links
  • Flexible positioning: left, right, center
  • Disabled state support for items and trigger
  • TypeScript support with comprehensive types

Props

PropTypeDefaultDescription
triggerIconLucideIconMoreHorizontalIcon for the trigger button
triggerTextstring"More"Text displayed on the trigger button
menuItemsMenuItem[][]Array of menu items to display
buttonTextstring"Post"Text for the action button (empty string hides button)
buttonHrefstring"/post"URL for the action button
buttonExternalbooleanfalseWhether the action button opens in new tab
position'left' | 'right' | 'center''left'Dropdown menu position relative to trigger
widthstring'w-72'Tailwind width class for the dropdown
iconSizestring'w-5 h-5'Tailwind size classes for menu item icons
triggerIconSizestring'w-5 h-5'Tailwind size classes for trigger icon
disabledbooleanfalseWhether the dropdown trigger is disabled
classNamestring''Additional CSS classes for the container
triggerClassNamestring''Additional CSS classes for the trigger button
menuClassNamestring''Additional CSS classes for the dropdown menu
itemClassNamestring''Additional CSS classes for menu items
buttonClassNamestring''Additional CSS classes for the action button

MenuItem Interface

1interface MenuItem {
2  icon: LucideIcon;     // Lucide React icon component
3  label: string;        // Display text for the menu item
4  id: string;          // Unique identifier
5  href?: string;       // Optional URL to navigate to
6  external?: boolean;  // Whether to open link in new tab
7  disabled?: boolean;  // Whether the item is disabled
8}