BLD8 / ui
Overlays

Context menu.

Useful actions beside the thing you are working on.

LIVE PREVIEWTry it. It works.
Interface notes

Right-click, long-press or use Shift + F10.

No action yet. Not pinned. Comfortable spacing.

Install the source

Terminal
npx shadcn@latest add https://ui.bld8.dev/r/context-menu.json

Registry setup · Open the playground

Usage

React / TypeScript
<ContextMenu>
  <ContextMenuTrigger aria-label="Note actions">Note</ContextMenuTrigger>
  <ContextMenuContent aria-label="Note actions">
    <ContextMenuItem onClick={openNote}>Open</ContextMenuItem>
    <ContextMenuItem disabled>Share</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Composable Base UI menu: right-click, long-press or keyboard context-menu activation on the focusable trigger. Includes disabled/destructive items, checkbox/radio items, groups, separators and nested submenus. Checkbox items stay open by default. Supply visible buttons or a DropdownMenu with the same actions so discovering a context menu is never required. The example shares state between both paths.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.