Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Usage

  • DropdownMenu component takes in items and trigger prop and renders a Dropdown Menu based on it.
  • trigger prop is the component that triggers the dropdown to open. It is required. It can be any React Component or even a simple string.
  • items prop is an array of objects that represent the items in the dropdown. Each object can have the following properties:
    • label: The text to display for the item.
    • href: The URL to navigate to when the item is clicked.
    • icon: An optional icon to display next to the item.
    • onClick: A function to call when the item is clicked.
    • items: An array of objects representing sub-items in a nested dropdown.

Interface for DropdownMenuProps

interface DropdownMenuItemType {
  label: string;
  href?: string;
  icon?: React.ReactNode;
  onClick?: () => void;
  items?: DropdownMenuItemType[];
}
interface DropdownMenuProps {
  className?: string;
  items: DropdownMenuItemType[];
  trigger?: React.ReactNode;
}

Example of items prop

const items: DropdownMenuItemType[] = [
   { label: "Home", href: "/", icon: <Cloud className="mr-2 h-4 w-4" /> },
   {
     label: "Products",
     icon: <CreditCard className="mr-2 h-4 w-4" />,
     items: [
       {
         label: "Electronics",
         href: "/products/electronics",
         icon: <Github className="mr-2 h-4 w-4" />,
       },
       {
         label: "Clothing",
         href: "/products/clothing",
         icon: <Keyboard className="mr-2 h-4 w-4" />,
       },
       {
         label: "More Categories",
         icon: <LifeBuoy className="mr-2 h-4 w-4" />,
         items: [
           {
             label: "Books",
             href: "/products/books",
             icon: <MessageSquare className="mr-2 h-4 w-4" />,
           },
           {
             label: "Furniture",
             href: "/products/furniture",
             icon: <Mail className="mr-2 h-4 w-4" />,
           },
         ],
       },
     ],
   },
   {
     label: "About Us",
     href: "/about",
     icon: <User className="mr-2 h-4 w-4" />,
   },
   {
     label: "Contact",
     href: "/contact",
     icon: <Mail className="mr-2 h-4 w-4" />,
   },
   {
     label: "Settings",
     icon: <Settings className="mr-2 h-4 w-4" />,
     items: [
       {
         label: "Profile",
         href: "/settings/profile",
         icon: <User className="mr-2 h-4 w-4" />,
       },
       {
         label: "Preferences",
         icon: <UserPlus className="mr-2 h-4 w-4" />,
         items: [
           {
             label: "Language",
             href: "/settings/preferences/language",
             icon: <Cloud className="mr-2 h-4 w-4" />,
           },
           {
             label: "Theme",
             href: "/settings/preferences/theme",
             icon: <LifeBuoy className="mr-2 h-4 w-4" />,
           },
         ],
       },
     ],
   },
   {
     label: "Actions",
     icon: <PlusCircle className="mr-2 h-4 w-4" />,
     items: [
       {
         label: "Action 1",
         onClick: () => alert("Action 1"),
         icon: <Plus className="mr-2 h-4 w-4" />,
       },
       {
         label: "Action 2",
         onClick: () => alert("Action 2"),
         icon: <Plus className="mr-2 h-4 w-4" />,
       },
     ],
   },
 ];

Customizable Design

More granular components provide you with more control over the design of the DropdownMenu component. You can customize the design of the DropdownMenu component by using the following sub-components:

  • Style of every sub-component of the DropdownMenu component can be customized using the className prop.
  • Pass in a CSS class or use Tailwind CSS utility classes to style the DropdownMenu component.
DialogHover Card

    Theme

    Presets

    Background

    Custom:

    Primary

    Custom:

    Secondary

    Custom:

    Border

    Custom:

    Mode

    Light
    Dark