Density

Context menu

Context menu composes Base UI’s context menu primitives with Density item styling for right-click actions.

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

export default function ContextMenuExample() {
  return (
    <ContextMenu
      trigger={
        <div className="context-menu-example-target">Right-click me!</div>
      }
      items={[
        { id: "open", label: "Open details" },
        { id: "duplicate", label: "Duplicate row" },
        { id: "separator", type: "separator" },
        { id: "archive", label: "Archive" },
      ]}
    />
  );
}

Props

Prop Attribute Values Default
trigger None React node Required
items None { id, label } or separator items Required
presentation data-dn-presentation button button
emphasis data-dn-emphasis primary, secondary, outline, ghost ghost
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm
popupPresentation data-dn-presentation overlay overlay
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1

Items

Open menu
import { ContextMenu } from "density-base-ui";

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

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

Emphasis

Primary
Secondary
Outline
Ghost
import { ContextMenu } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

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

export default function ContextMenuEmphasisExample() {
  return (
    <ExampleRow>
      <ContextMenu trigger="Primary" items={items} emphasis="primary" />
      <ContextMenu trigger="Secondary" items={items} emphasis="secondary" />
      <ContextMenu trigger="Outline" items={items} emphasis="outline" />
      <ContextMenu trigger="Ghost" items={items} emphasis="ghost" />
    </ExampleRow>
  );
}

Size

2xs
xs
sm
md
lg
xl
2xl
3xl
import { ContextMenu } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

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

export default function ContextMenuSizeExample() {
  return (
    <ExampleRow>
      <ContextMenu trigger="2xs" items={items} size="2xs" />
      <ContextMenu trigger="xs" items={items} size="xs" />
      <ContextMenu trigger="sm" items={items} size="sm" />
      <ContextMenu trigger="md" items={items} size="md" />
      <ContextMenu trigger="lg" items={items} size="lg" />
      <ContextMenu trigger="xl" items={items} size="xl" />
      <ContextMenu trigger="2xl" items={items} size="2xl" />
      <ContextMenu trigger="3xl" items={items} size="3xl" />
    </ExampleRow>
  );
}

Padding

None
2xs
xs
sm
md
lg
xl
2xl
3xl
import { ContextMenu } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

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

export default function ContextMenuPaddingExample() {
  return (
    <ExampleRow>
      <ContextMenu trigger="None" items={items} padding="none" />
      <ContextMenu trigger="2xs" items={items} padding="2xs" />
      <ContextMenu trigger="xs" items={items} padding="xs" />
      <ContextMenu trigger="sm" items={items} padding="sm" />
      <ContextMenu trigger="md" items={items} padding="md" />
      <ContextMenu trigger="lg" items={items} padding="lg" />
      <ContextMenu trigger="xl" items={items} padding="xl" />
      <ContextMenu trigger="2xl" items={items} padding="2xl" />
      <ContextMenu trigger="3xl" items={items} padding="3xl" />
    </ExampleRow>
  );
}

Depth

Depth 1
Depth 2
Depth 3
Depth 4
Depth 5
Depth 6
Depth 7
import { ContextMenu } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

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

export default function ContextMenuDepthExample() {
  return (
    <ExampleRow>
      <ContextMenu trigger="Depth 1" items={items} depth="1" />
      <ContextMenu trigger="Depth 2" items={items} depth="2" />
      <ContextMenu trigger="Depth 3" items={items} depth="3" />
      <ContextMenu trigger="Depth 4" items={items} depth="4" />
      <ContextMenu trigger="Depth 5" items={items} depth="5" />
      <ContextMenu trigger="Depth 6" items={items} depth="6" />
      <ContextMenu trigger="Depth 7" items={items} depth="7" />
    </ExampleRow>
  );
}