Skip to content
Page

Context Menu

Menu that opens from a right click on its trigger.

Right click here

Import

Section titled “Import”
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuPortal,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
} from "@pelagornis/page/components";

Example

Section titled “Example”

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/ContextMenuExample.tsx
import {
  Box,
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuPortal,
  ContextMenuSeparator,
  ContextMenuTrigger,
  Text,
} from "@pelagornis/page/components";


export default function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <Box
          padding="sizeXXLarge"
          border="strokeWidthThin"
          borderColor="borderDefault"
          radius="roundedLarge"
          className="w-full text-center"
        >
          <Text variant="bodyMd">Right click here</Text>
        </Box>
      </ContextMenuTrigger>
      <ContextMenuPortal>
        <ContextMenuContent>
          <ContextMenuItem>Copy</ContextMenuItem>
          <ContextMenuItem>Rename</ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem>Delete</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenuPortal>
    </ContextMenu>
  );
}

Use in MDX

Section titled “Use in MDX”

Context Menu is composed from parts that share React state. Children written in MDX are rendered as separate islands, so the parts can’t reach each other. Put the composition in a .tsx file, like the example above, and import that file instead.

src/content/docs/example.mdx
---
title: Example
---


import ContextMenuExample from "../../components/ContextMenuExample";


<ContextMenuExample client:load />

client:load hydrates the island on page load. Use client:visible for content far down the page.

Use in Markdoc

Section titled “Use in Markdoc”

Markdoc tags render Astro components, and this one needs client state. Wrap the example in an .astro file that hydrates it, then register that file as a tag.

src/components/markdoc/ContextMenuExample.astro
---
import ContextMenuExample from "../ContextMenuExample";
---


<ContextMenuExample client:load />
markdoc.config.mjs
import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";


export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "context-menu-example": {
      render: component("./src/components/markdoc/ContextMenuExample.astro"),
      selfClosing: true,
    },
  },
});
src/content/docs/example.mdoc
{% context-menu-example /%}

Reference

Section titled “Reference”