Density

Context menu

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

Right-click row 42
import { ContextMenu } from "density-base-ui";

export default function ContextMenuExample() {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger className="context-menu-example-target">
        Right-click row 42
      </ContextMenu.Trigger>
      <ContextMenu.Portal>
        <ContextMenu.Positioner>
          <ContextMenu.Popup className="context-menu-example-popup">
            <ContextMenu.Item>Open details</ContextMenu.Item>
            <ContextMenu.Item>Duplicate row</ContextMenu.Item>
            <ContextMenu.Separator className="context-menu-example-separator" />
            <ContextMenu.Item>Archive</ContextMenu.Item>
          </ContextMenu.Popup>
        </ContextMenu.Positioner>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  );
}

Props

Prop Attribute Values Default
ContextMenu.Item density-presentation data-dn-presentation button button
ContextMenu.Item density-emphasis data-dn-emphasis primary, secondary, outline, ghost ghost
ContextMenu.Item density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
ContextMenu.SubmenuTrigger density-presentation data-dn-presentation button button
ContextMenu.SubmenuTrigger density-emphasis data-dn-emphasis primary, secondary, outline, ghost ghost
ContextMenu.SubmenuTrigger density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
ContextMenu.Popup density-presentation data-dn-presentation card card
ContextMenu.Popup density-level data-dn-level 1, 2, 3, 4, 5, 6, 7 3
Other ContextMenu parts Mixed Base UI context menu props None