Context Menu

A right-click menu with a keyboard equivalent, submenus, and typeahead.

Group: Overlays · Import path: @orionshub/lucent/context-menu · Client component — ships a "use client" boundary.

Import

import { ContextMenu } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Right-click menu

Right-click menu

Show source

export function ContextMenuBasic() {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger asChild>
        <Box p={4} style={{ border: '1px dashed hsl(var(--lucent-border))', borderRadius: 10 }}>
          <Text muted>Right-click here</Text>
        </Box>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item>Copy</ContextMenu.Item>
        <ContextMenu.Item>Paste</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item variant="destructive">Remove</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  )
}

Props

ContextMenuContent

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

ContextMenuItem

Prop	Type	Default	Description
variant	"default" | "destructive" | undefined	—

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

Portal theming

This component renders through a portal to document.body. Because theme tokens are scoped to :root, portalled content stays themed automatically — do not nest it inside a transformed/backdrop-filter ancestor if you portal it manually. See Portal Theming.

Reduced motion

Animations are CSS-only and disabled under @media (prefers-reduced-motion: reduce). See Reduced Motion.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Client component — ships a "use client" boundary. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.