DocsBug ReportShowcase

Context Menu

Installation

bash
npx gbs-add-block@latest -a ContextMenu

The ContextMenu component provides a customizable right-click menu, allowing users to access additional options in your UI. It comes with default styling that can be easily overridden.

Props Table

PropTypeDescription
childrenReactNodeMenu items to be displayed in the context menu.

Example

bash
Will Update Soon 🤝

Usage Example

Here’s an example of how to use the ContextMenu component in your project:

typescript
"use client";

import { ContextMenu } from "@/component-lib/contextmenu";
import {
  ContextMenuItem,
  ContextMenuDivider,
} from "@/component-lib/contextmenu/ContextMenuItem";

export const ContextMenuWrapper = () => {
  const handleEdit = () => console.log("Edit clicked");
  const handleDelete = () => console.log("Delete clicked");
  const handleShare = () => console.log("Share clicked");

  return (
    <div className="h-[400px] flex items-center justify-center bg-gray-100 dark:bg-gray-900">
      <div className="p-8 bg-white rounded-lg shadow dark:bg-gray-800">
        <p>Right-click anywhere to see the context menu</p>

        <ContextMenu>
          <ContextMenuItem onClick={handleEdit}>Edit</ContextMenuItem>
          <ContextMenuItem onClick={handleDelete} disabled>
            Delete
          </ContextMenuItem>
          <ContextMenuDivider />
          <ContextMenuItem onClick={handleShare}>Share</ContextMenuItem>
        </ContextMenu>
      </div>
    </div>
  );
};

Customization

You can customize the appearance of the context menu and its items by overriding the default styles. For instance, you can add additional Tailwind CSS classes directly to the components:

<ContextMenuItem className="text-blue-500 font-semibold" />