Dropdown

A customizable, pixel-art styled dropdown menu component with support for triggers, content, items, and separators.

Basic Usage

import { 
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator
} from 'pixel-retroui';

function App() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        Open Menu
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Logout</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Props

Component	Prop	Type	Default	Description
DropdownMenu	bg	string	#ffffff	Background color of the dropdown
	textColor	string	#000000	Text color of the dropdown
	borderColor	string	#000000	Border color of the dropdown
	shadowColor	string	#000000	Shadow color of the dropdown
	className	string		Additional CSS classes
DropdownMenuTrigger	bg	string	#ffffff	Background color of the trigger button
	textColor	string	#000000	Text color of the trigger button
	shadow	string	#000000	Shadow color of the trigger button
	borderColor	string	#000000	Border color of the trigger button

Custom Dropdown

Customize your dropdown's appearance by selecting a preset theme or creating your own color scheme.

Theme:

<DropdownMenu
  bg="#fefcd0"
  textColor="black"
  borderColor="black"
  shadowColor="#c381b5"
>
  <DropdownMenuTrigger>
    Click me
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Option 1</DropdownMenuItem>
    <DropdownMenuItem>Option 2</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Option 3</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Additional Examples

With Nested Content and Hover Effects

<DropdownMenu>
  <DropdownMenuTrigger 
    bg="#E0EFF2"
    className="hover:bg-blue-100 transition-colors duration-200"
  >
    File Options
  </DropdownMenuTrigger>
  <DropdownMenuContent 
    bg="#E0EFF2" 
    className="w-48"
  >
    <DropdownMenuItem className="hover:bg-blue-100 transition-colors duration-200">
      <div className="flex items-center gap-2">
        <span className="text-lg">📄</span>
        <span>New File</span>
      </div>
    </DropdownMenuItem>
    <DropdownMenuItem className="hover:bg-blue-100 transition-colors duration-200">
      <div className="flex items-center gap-2">
        <span className="text-lg">📁</span>
        <span>Open Folder</span>
      </div>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="hover:bg-blue-100 transition-colors duration-200">
      <div className="flex items-center gap-2">
        <span className="text-lg">💾</span>
        <span>Save</span>
      </div>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Preview: