Basic ready made example

This is the basic example of how to use the Dropdown menu. This is an example of the ready made one. Below will be the original one that you can craft by yourself.

Options

The options are the items that will be displayed in the dropdown menu. You can pass an array of objects to the options prop. Each object will be used to create a dropdown menu item. The object should have the following properties:

• type : Type of the item. It can be "custom", "divider", or "default". If it a divider it will auto use divider. And if you use custom it will use the label as a content.
• label : Label that will be displayed on the button.
• icon : Icon that will be displayed on the button.
• color : It will be used to set the color of the button. You can pass the css class to set the color. (Ex. "text-red-500 hover:text-red-500 hover:bg-red-100")
• onAction : Function that will be called when the button is clicked. It will pass the id of that row that you provide on the "idKey". (This will be ignored if href is provided)
• href : URL that will be opened when the button is clicked. It will find ":id" in your path and then change that with the id of that row that you provide on the "idKey". (If this is provided, action will be ignored)
• target : Target that will be used to open the link. It can be "_blank", "_self", "_parent", or "_top". (Optional)
• disable : If this is true, the button will be disabled.

Option interface

1export interface DropdownMenuItemProps {
2  type?: string; // "custom" | "divider" | "default"
3  label?: React.ReactNode;
4  icon?: React.ReactNode;
5  color?: string;
6  onAction?: Function;
7  href?: string;
8  target?: string;
9  disabled?: boolean;
10}

Options example

1[
2  {
3    type: "custom",
4    label: (
5      <div className="flex w-56 flex-col gap-x-2 p-2">
6        <h1 className="font-semibold">John Doe</h1>
7        <p className="text-sm text-gray-600">john.doe@gmail.com</p>
8      </div>
9    ),
10  },
11  {
12    label: "View",
13    icon: <MagnifyingGlassIcon className="size-5" />,
14    color: "blue",
15    href: "https://youtu.be/dQw4w9WgXcQ?si=g_p7SnhL4lT9KmIw",
16  },
17  {
18    type: "divider",
19  },
20  {
21    label: "Edit",
22    icon: <PencilSquareIcon className="size-5" />,
23    color: "green",
24    onAction: () => {
25      alert("Edit");
26    },
27  },
28];

Anchor

You can pass the anchor position to the DropdownMenu component. The anchor position is the position of the dropdown content. There are 8 position you can pass.

• top
• bottom
• left
• right
• top start
• top end
• bottom start
• bottom end (Default)

Attribute

Basic original example

This is the basic example of how to use the original dropdown menu. This section will teach you how to use the dropdown menu component part by part. There are 4 parts of the dropdown menu component.

• Menu : This is the top level component that is the wrapper of the dropdown menu.
• MenuButton : This is the button that will trigger the dropdown menu to open. You can pass the className to the button to customize the style of the button.
• MenuItems : This is the wrapper of the dropdown menu items. You can pass the anchor position to the component. The anchor position is the position of the dropdown content. There are 8 position you can pass just like the ready make one. Out menu items already style with the tailwind css.
• MenuItem : This is the item of the dropdown menu. You can pass the children to the components.