---
components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
---

<script>
    import Preview from "../../components/Preview.svelte";
</script>

`ContextMenu` displays a menu when users right-click. Use it to provide quick access to contextual actions or options.

In the examples, right click anywhere within the iframe.
  
## Default

The context menu appears when right-clicking anywhere in the window. Use `ContextMenuOption` for menu items and `ContextMenuDivider` for visual separation.
  
<FileSource src="/framed/ContextMenu/ContextMenu" />

## Custom target

By default, the context menu will trigger when right clicking anywhere in the `window`.

Set `target` to specify which element triggers the context menu.

<FileSource src="/framed/ContextMenu/ContextMenuTarget" />

## Multiple targets

Set `target` to an array of elements to trigger the context menu from multiple sources.

<FileSource src="/framed/ContextMenu/ContextMenuTargets" />

## Radio groups

Use `ContextMenuGroup` and `ContextMenuRadioGroup` to organize related options and create radio button selections.

<FileSource src="/framed/ContextMenu/ContextMenuGroups" />