Density

ContextMenu

ContextMenu composes Base UI’s context menu primitives with Density item styling for right-click actions. Its trigger is a consumer-owned React element; the component owns its menu-item interaction and popup surface styling, never the trigger.

Right-click me!
import { ContextMenu } from "density-base-ui";
import { ContextMenuExampleTarget } from "./ContextMenuExampleTarget";

export default function ContextMenuExample() {
  return (
    <ContextMenu
      trigger={<ContextMenuExampleTarget />}
      items={[
        { id: "open", label: "Open details" },
        { id: "duplicate", label: "Duplicate row" },
        { id: "separator", type: "separator" },
        { id: "archive", label: "Archive" },
      ]}
    />
  );
}

Items

Use items for menu actions and separators. Item color affects only that item, not the menu’s other items.

Right-click me!
import { ContextMenu, type ContextMenuItem } from "density-base-ui";
import { ContextMenuExampleTarget } from "./ContextMenuExampleTarget";

const items: ContextMenuItem[] = [
  { id: "open", label: "Open" },
  { id: "separator", type: "separator" as const },
  { id: "archive", label: "Archive", disabled: true },
  { id: "delete", label: "Delete", color: "destructive" },
];

export default function ContextMenuItemsExample() {
  return <ContextMenu trigger={<ContextMenuExampleTarget />} items={items} />;
}

Color

Set item color to destructive, warning, or success for semantic menu actions. Menu items currently use ghost-primary emphasis; a future API can expose other emphasis choices when a menu needs action hierarchy.

Right-click me!
import { ContextMenu } from "density-base-ui";
import { ContextMenuExampleTarget } from "./ContextMenuExampleTarget";

export default function ContextMenuColorExample() {
  return (
    <ContextMenu
      trigger={<ContextMenuExampleTarget />}
      items={[
        { id: "approve", label: "Approve", color: "success" },
        { id: "flag", label: "Flag for review", color: "warning" },
        { id: "separator", type: "separator" },
        { id: "delete", label: "Delete", color: "destructive" },
      ]}
    />
  );
}

Size

Right-click me!
Right-click me!
Right-click me!
Right-click me!
Right-click me!
Right-click me!
Right-click me!
Right-click me!
import { ContextMenu, View } from "density-base-ui";
import { ContextMenuExampleTarget } from "./ContextMenuExampleTarget";

const items = [
  { id: "open", label: "Open" },
  { id: "archive", label: "Archive" },
];

export default function ContextMenuSizeExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        size="2xs"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        size="xs"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        size="sm"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        size="md"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        size="lg"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        size="xl"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        size="2xl"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        size="3xl"
      />
    </View>
  );
}

Padding

Right-click me!
Right-click me!
import { ContextMenu, View } from "density-base-ui";
import { ContextMenuExampleTarget } from "./ContextMenuExampleTarget";

const items = [
  { id: "open", label: "Open" },
  { id: "archive", label: "Archive" },
];

export default function ContextMenuPaddingExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        padding={false}
      />
      <ContextMenu trigger={<ContextMenuExampleTarget />} items={items} />
    </View>
  );
}

Depth

Right-click me!
Right-click me!
Right-click me!
Right-click me!
Right-click me!
Right-click me!
Right-click me!
import { ContextMenu, View } from "density-base-ui";
import { ContextMenuExampleTarget } from "./ContextMenuExampleTarget";

const items = [
  { id: "open", label: "Open" },
  { id: "archive", label: "Archive" },
];

export default function ContextMenuDepthExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        depth="1"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        depth="2"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        depth="3"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        depth="4"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        depth="5"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        depth="6"
      />
      <ContextMenu
        trigger={<ContextMenuExampleTarget />}
        items={items}
        depth="7"
      />
    </View>
  );
}