---
Title: Context Menu
Type: Document
---

import {Code} from "astro:components"
import {Zorn} from "@minpluto/zorn"

<Zorn
	PlayerName="ennie_and_yoyki"
	Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
	Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki:%20Non-Girly%20Games.mp4"
	ContextItems={
		[
			{
				"Type": "Button",
				"Name": "Copy URL",
				"Action": "null",
			},
			{
				"Type": "Link",
				"Name": "Copy URL with Timestamp",
				"Action": "#",
			},
			{
				"Type": "Link",
				"Name": "Copy Embed Code",
				"Action": "#",
			},
			{
				"Type": "Link",
				"Name": "Troubleshoot Player",
				"Action": "#",
			}
		]
	}
/>

> Right-click in the demo above to see it action.

You can override the browser's default context menu by adding your own, this is done with the `ContextItems` variable being added with an array.

Example:

<Code lang="jsx" code={`
<Zorn
	ContextItems={
		[
			{
				"Type": "Button",
				"Name": "Copy URL",
				"Action": "null",
			},
			{
				"Type": "Link",
				"Name": "Copy Embed Code",
				"Action": "#",
			},
			{
				"Type": "Separator"
			},
			{
				"Type": "Link",
				"Name": "Troubleshoot Player",
				"Action": "#",
			}
		]
	}
/>
`}/>

If the `ContextItems` variable is not applied, Zorn will default to the browser's default context menu.

| Variable           | Option                                                        |
|--------------------|---------------------------------------------------------------|
| Type               | `Button`, `Link`, or `Separator`                              |
| Name               | string                                                        |
| Action (Button)    | `onclick` - Use JavaScript                                    |
| Action (Link)      | `href` - Use a link                                           |