Context Menu

<loomi-context-menu> gives any region a Loomi-styled right-click action menu. It follows the same visual language and item API as <loomi-dropmenu>, but opens from the pointer or keyboard context-menu gesture instead of a trigger button.

npm install @loomidev/context-menu lit

import "@loomidev/context-menu";

Basic usage

Put the right-click target in the target slot and menu actions in the default slot.

Right-click this file

Duplicate Rename Delete

<loomi-context-menu>
  <div slot="target">Right-click this file</div>

  <loomi-context-menu-item icon="document-duplicate">Duplicate</loomi-context-menu-item>
  <loomi-context-menu-item icon="pencil-square" shortcut="E">Rename</loomi-context-menu-item>
  <loomi-context-menu-item divider></loomi-context-menu-item>
  <loomi-context-menu-item icon="trash">Delete</loomi-context-menu-item>
</loomi-context-menu>

Keyboard users can focus the target and press the Context Menu key or Shift+F10.

Items

<loomi-context-menu-item> supports the same core item affordances as dropmenu:

Actions Project View profile Support Documentation Contact support

<loomi-context-menu>
  <button slot="target">Actions</button>

  <loomi-context-menu-item header>Project</loomi-context-menu-item>
  <loomi-context-menu-item icon="user" shortcut="⌘K P">View profile</loomi-context-menu-item>
  <loomi-context-menu-item icon="question-mark-circle">
    Support
    <loomi-context-menu-item slot="submenu">Documentation</loomi-context-menu-item>
    <loomi-context-menu-item slot="submenu">Contact support</loomi-context-menu-item>
  </loomi-context-menu-item>
</loomi-context-menu>

Where the menu is drawn

The menu is positioned against the viewport (position: fixed) at the pointer, so no ancestor’s overflow clips it.

A submenu is a floating panel in its own right, on the same terms: it opens beside the row that owns it, flips to that row’s left when it would run off the right of the screen, slides up when it is taller than the room beneath the row, and is in the top layer — so scrollable menus don’t clip it either. A nested submenu follows whichever side its parent settled on, rather than zig-zagging back across it.

The resolved side is published as data-side="left" | "right" on the submenu, and the submenu is exposed as the submenu part.

Submenus open on hover and on keyboard focus, and close a moment after the pointer leaves both the row and the panel — the delay is what lets you cross the gap between them.

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Attributes

<loomi-context-menu>

Attribute	Default	Description
disabled	false	Prevents opening the menu.
divided	false	Adds dividers between direct child items.
placement	auto	Horizontal alignment from the pointer: auto, left, or right.
scrollable	false	Constrains the menu height and scrolls its contents.
height	200	Scrollable menu height in pixels.
hide-after-click	true	Closes after a selectable item without a submenu is clicked.
icon-right	false	Places item icons on the right unless an item overrides it.

<loomi-context-menu-item>

Attribute	Default	Description
icon	(blank)	Loomi icon name.
shortcut	(blank)	Shortcut text shown at the trailing edge.
icon-right	false	Places this item’s icon on the right.
header	false	Renders non-selectable section text.
divider	false	Renders a separator line.
hover	true	Enables hover/focus background styling.

Slots

Slot	Description
(default)	Content placed inside the component.
submenu	Nested menu items.
target	The element that opens the context menu.

Methods

Method	Description
showAt(clientX, clientY)	Opens the menu at viewport coordinates.
hide()	Closes the menu.

Styling hooks

The component understands its own CSS variables and the dropmenu variables where that keeps visual compatibility useful.

Variable	Default
--loomi-context-menu-z-index	var(--loomi-dropmenu-z-index, 1000)
--loomi-context-menu-min-width	var(--loomi-dropmenu-min-width, 13.5rem)
--loomi-context-menu-hover	var(--loomi-dropmenu-hover, ...)
--loomi-context-menu-submenu-min-width	var(--loomi-dropmenu-submenu-min-width, 12rem)

Development

pnpm --filter @loomidev/context-menu build
pnpm --filter @loomidev/context-menu typecheck

Dependencies

• @loomidev/core
• @loomidev/icons