@metadiv-studio/dropdown-menu

A flexible and customizable dropdown menu component built with React and Radix UI primitives. This package provides a high-level dropdown menu component with configurable positioning, styling, and interactive elements.

Installation

npm install @metadiv-studio/dropdown-menu

Tailwind CSS Configuration

Important: To use this package's Tailwind CSS styles, you must add the following path to your tailwind.config.js or tailwind.config.ts file:

// tailwind.config.js
module.exports = {
  content: [
    // ... other content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of config
}

This ensures that Tailwind can scan the package's components and include the necessary CSS classes in your final build.

Usage

Basic Example

import React from 'react';
import { DropdownMenu } from '@metadiv-studio/dropdown-menu';

const MyComponent = () => {
  const menuItems = [
    {
      label: 'Edit',
      onClick: () => console.log('Edit clicked'),
      icon: <EditIcon />
    },
    {
      label: 'Delete',
      onClick: () => console.log('Delete clicked'),
      className: 'text-red-500',
      icon: <DeleteIcon />
    },
    {
      label: 'Settings',
      onClick: () => console.log('Settings clicked')
    }
  ];

  return (
    <DropdownMenu
      items={menuItems}
      side="bottom"
      trigger={<button>Open Menu</button>}
    />
  );
};

Props Reference

DropdownMenuProps

| Prop | Type | Required | Description | Example | |------|------|----------|-------------|---------| | items | DropdownItem[] | ✅ | Array of menu items to display | See DropdownItem interface below | | side | "top" \| "bottom" \| "left" \| "right" | ✅ | Position of the dropdown relative to trigger | "bottom" | | trigger | React.ReactNode | ✅ | Element that triggers the dropdown | <button>Menu</button> |

DropdownItem Interface

| Prop | Type | Required | Description | Example | |------|------|----------|-------------|---------| | label | string | ✅ | Text displayed in the menu item | "Edit Profile" | | onClick | () => void | ✅ | Function called when item is clicked | () => handleEdit() | | className | string | ❌ | Additional CSS classes for styling | "text-red-500 font-bold" | | icon | React.ReactNode | ❌ | Icon or element displayed before the label | <EditIcon /> |

Props Usage Guidelines

1. items Prop

The items prop accepts an array of DropdownItem objects. Each item represents a clickable menu option.

Example with different item types:

const menuItems = [
  {
    label: 'Profile',
    onClick: () => navigate('/profile'),
    icon: <UserIcon className="w-4 h-4" />
  },
  {
    label: 'Settings',
    onClick: () => navigate('/settings'),
    icon: <SettingsIcon className="w-4 h-4" />
  },
  {
    label: 'Logout',
    onClick: () => handleLogout(),
    className: 'text-red-600 hover:text-red-700',
    icon: <LogoutIcon className="w-4 h-4" />
  }
];

2. side Prop

Controls the positioning of the dropdown menu relative to the trigger element.

Available values:

• "top": Menu appears above the trigger
• "bottom": Menu appears below the trigger (default)
• "left": Menu appears to the left of the trigger
• "right": Menu appears to the right of the trigger

Example with different positions:

// Bottom dropdown (most common)
<DropdownMenu side="bottom" items={items} trigger={<button>Menu</button>} />

// Top dropdown
<DropdownMenu side="top" items={items} trigger={<button>Menu</button>} />

// Left dropdown
<DropdownMenu side="left" items={items} trigger={<button>Menu</button>} />

// Right dropdown
<DropdownMenu side="right" items={items} trigger={<button>Menu</button>} />

3. trigger Prop

The element that users click to open the dropdown menu. Can be any React element.

Examples:

// Button trigger
<DropdownMenu 
  trigger={<button className="px-4 py-2 bg-blue-500 text-white rounded">Open Menu</button>}
  items={items}
  side="bottom"
/>

// Icon trigger
<DropdownMenu 
  trigger={<MoreVerticalIcon className="w-5 h-5 cursor-pointer" />}
  items={items}
  side="bottom"
/>

// Custom component trigger
<DropdownMenu 
  trigger={<UserAvatar src="/avatar.jpg" />}
  items={items}
  side="bottom"
/>

4. DropdownItem Properties

label Property

The text content displayed in the menu item.

{
  label: 'Edit Profile', // Required text content
  onClick: () => handleEdit()
}

onClick Property

Function executed when the menu item is clicked.

{
  label: 'Save',
  onClick: () => {
    // Handle save logic
    saveData();
    showNotification('Saved successfully');
  }
}

className Property

Additional CSS classes for custom styling.

{
  label: 'Delete',
  onClick: () => handleDelete(),
  className: 'text-red-500 hover:bg-red-50 font-semibold'
}

icon Property

Icon or React element displayed before the label.

import { EditIcon, DeleteIcon, SettingsIcon } from 'lucide-react';

const items = [
  {
    label: 'Edit',
    onClick: () => handleEdit(),
    icon: <EditIcon className="w-4 h-4" />
  },
  {
    label: 'Delete',
    onClick: () => handleDelete(),
    icon: <DeleteIcon className="w-4 h-4" />,
    className: 'text-red-500'
  },
  {
    label: 'Settings',
    onClick: () => handleSettings(),
    icon: <SettingsIcon className="w-4 h-4" />
  }
];

Complete Example

import React from 'react';
import { DropdownMenu } from '@metadiv-studio/dropdown-menu';
import { MoreVerticalIcon, EditIcon, TrashIcon, SettingsIcon } from 'lucide-react';

const UserActionsDropdown = () => {
  const handleEdit = () => {
    console.log('Edit user');
  };

  const handleDelete = () => {
    console.log('Delete user');
  };

  const handleSettings = () => {
    console.log('User settings');
  };

  const menuItems = [
    {
      label: 'Edit User',
      onClick: handleEdit,
      icon: <EditIcon className="w-4 h-4" />
    },
    {
      label: 'User Settings',
      onClick: handleSettings,
      icon: <SettingsIcon className="w-4 h-4" />
    },
    {
      label: 'Delete User',
      onClick: handleDelete,
      icon: <TrashIcon className="w-4 h-4" />,
      className: 'text-red-500 hover:text-red-700'
    }
  ];

  return (
    <div className="p-8">
      <DropdownMenu
        items={menuItems}
        side="bottom"
        trigger={
          <button className="p-2 hover:bg-gray-100 rounded-full">
            <MoreVerticalIcon className="w-5 h-5" />
          </button>
        }
      />
    </div>
  );
};

export default UserActionsDropdown;

Styling

The component uses Tailwind CSS classes and can be customized through:

1. Item-level styling: Use the className prop on individual items
2. Global styling: Override CSS classes in your application
3. Theme customization: Modify Tailwind configuration

The component includes built-in hover states, focus states, and smooth animations.

Dependencies

This package depends on:

• React 18+
• @radix-ui/react-dropdown-menu
• @radix-ui/react-icons
• Tailwind CSS

License

UNLICENSED

This package is provided under the UNLICENSE, which means it's released into the public domain. You can use, modify, distribute, and even sell this software without any restrictions.

For more information about the UNLICENSE, visit: https://unlicense.org/