Drop Down

This is a Drop Down component.

Installation

1. Dependencies

npm install clsx tailwind-merge framer-motion

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Drop Down Code

Copy Drop Down Code

DropdownMenu Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The dropdown menu content.
className	string	No	""	Additional class names for styling.

DropdownMenuTrigger Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The trigger element for the dropdown.
onClick	() => void	No	undefined	Callback when the trigger is clicked.
className	string	No	""	Additional class names for styling.

DropdownMenuContent Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The dropdown menu items.
className	string	No	""	Additional class names for styling.
align	"left" \| "right" \| "center"	No	"left"	Alignment of the dropdown content.
isOpen	boolean	Yes	false	Controls whether the dropdown is open.
onClose	() => void	Yes	undefined	Callback to close the dropdown.

DropdownMenuItem Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The content of the dropdown item.
onClick	() => void	No	undefined	Callback when the item is clicked.
className	string	No	""	Additional class names for styling.

DropdownMenuCheckboxItem Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The content of the checkbox item.
onClick	() => void	No	undefined	Callback when the checkbox is clicked.
className	string	No	""	Additional class names for styling.

DropdownMenuRadioItem Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The content of the radio item.
onClick	() => void	No	undefined	Callback when the radio item is clicked.
className	string	No	""	Additional class names for styling.

DropdownMenuLabel Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The label content.
className	string	No	""	Additional class names for styling.

DropdownMenuSeparator Props

Name	Type	Required	Default	Description
className	string	No	""	Additional class names for styling.

DropdownMenuShortcut Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The shortcut content (e.g., keyboard shortcuts).
className	string	No	""	Additional class names for styling.

DropdownMenuGroup Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The group content.
className	string	No	""	Additional class names for styling.

DropdownMenuPortal Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The portal content to render outside the DOM hierarchy.

DropdownMenuSub Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The submenu content.
className	string	No	""	Additional class names for styling.

DropdownMenuSubContent Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The submenu content items.
className	string	No	""	Additional class names for styling.
isOpen	boolean	Yes	false	Controls whether the submenu is open.
onClose	() => void	Yes	undefined	Callback to close the submenu.

DropdownMenuSubTrigger Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The trigger element for the submenu.
onClick	() => void	No	undefined	Callback when the submenu trigger is clicked.
className	string	No	""	Additional class names for styling.

DropdownMenuRadioGroup Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The radio group content.
className	string	No	""	Additional class names for styling.