Context Menu

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Alert Dialog Dialog →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

npx astrocraft-ui add overlays/context-menu

Plain-CSS theme — no build step

npx astrocraft-ui add overlays/context-menu --theme css

Tailwind theme — needs Tailwind v4

npx astrocraft-ui add overlays/context-menu --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

npx astrocraft-ui add overlays/context-menu --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

npx astrocraft-ui add overlays/context-menu --theme tailwind --bridge lumos

ContextMenu & menu parts

Right-click inside the box. Hold Shift while you do and you get the browser's own menu back instead. Focus the box and press the context-menu key and it opens anchored to the box, not at the corner of the screen. The checkbox and radio items keep the menu open on purpose, and report through a plain change event.

Right-click anywhere in this region

Nothing chosen yet.

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

Component	Slots	Variants	Runtime state	Native state
`ContextMenu.astro`	`context-menu`	—	—	—
`ContextMenuContent.astro`	`context-menu-content`	`data-side`: `bottom` · `top` · `left` · `right` `data-align`: `start` · `center` · `end`	—	—
`ContextMenuItem.astro`	`context-menu-item`	—	—	—
`ContextMenuTrigger.astro`	`context-menu-trigger`	—	—	—

Source

What the command copies — 5 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/overlays/context-menu/ContextMenu.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="context-menu" {...rest}>
  <slot />
</div>

<script>
  import "../../_menu";

  import { anchorTo, place, pointRect } from "../../_anchor";
  import { onReadyOnce } from "../../_once";

  function wire(root: HTMLElement) {
    const trigger = root.querySelector<HTMLElement>('[data-slot="context-menu-trigger"]');
    const panel = root.querySelector<HTMLElement>('[data-slot="context-menu-content"]');
    if (!trigger || !panel) return;

    trigger.addEventListener("contextmenu", (event) => {
      if (event.shiftKey) return;
      event.preventDefault();

      const fromPointer = event.clientX !== 0 || event.clientY !== 0;
      anchorTo(panel, () =>
        fromPointer ? pointRect(event.clientX, event.clientY) : trigger.getBoundingClientRect(),
      );

      if (panel.matches(":popover-open")) place(panel);
      else panel.showPopover();
    });
  }

  onReadyOnce('[data-slot="context-menu"]', wire);
</script>

src/components/ui/overlays/context-menu/ContextMenuContent.astro

---
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  id: string;
  side?: "bottom" | "top" | "left" | "right";
  align?: "start" | "center" | "end";
  offset?: number;
};

const { side = "bottom", align = "start", offset, class: className, ...rest } = Astro.props;
---

<div
  popover="auto"
  role="menu"
  data-slot="context-menu-content"
  data-anchor
  data-side={side}
  data-align={align}
  data-offset={offset}
  class={className}
  {...rest}
>
  <slot />
</div>

src/components/ui/overlays/context-menu/ContextMenuItem.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & { href?: string };

const { href, class: className, ...rest } = Astro.props;
const Tag = href ? "a" : "button";
---

<Tag
  href={href}
  type={href ? undefined : "button"}
  role="menuitem"
  data-slot="context-menu-item"
  class={className}
  {...rest}
>
  <slot />
</Tag>

src/components/ui/overlays/context-menu/ContextMenuTrigger.astro

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & { for: string };

const { for: target, class: className, ...rest } = Astro.props;
---

{}
<div
  tabindex="0"
  aria-owns={target}
  aria-haspopup="menu"
  data-slot="context-menu-trigger"
  class={className}
  {...rest}
>
  <slot />
</div>

src/components/ui/overlays/context-menu/index.ts

import ContextMenu from "./ContextMenu.astro";
import ContextMenuContent from "./ContextMenuContent.astro";
import ContextMenuItem from "./ContextMenuItem.astro";
import ContextMenuTrigger from "./ContextMenuTrigger.astro";

export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger };
export default ContextMenu;

What you get

The component source, copied into your project by npx astrocraft-ui add overlays/context-menu — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.

Install

Live demo

ContextMenu & menu parts

Attribute surface

Source

What you get