| 1 | # Configure Context Menu |
| 2 | |
| 3 | <Environment type="client" /> |
| 4 | |
| 5 | Customize the context menu items in Slidev. |
| 6 | |
| 7 | Create `./setup/context-menu.ts` with the following content: |
| 8 | |
| 9 | ```ts twoslash [./setup/context-menu.ts] |
| 10 | // ---cut--- |
| 11 | import { useNav } from '@slidev/client' |
| 12 | import { defineContextMenuSetup } from '@slidev/types' |
| 13 | import { computed } from 'vue' |
| 14 | // ---cut-start--- |
| 15 | // @ts-expect-error missing types |
| 16 | // ---cut-end--- |
| 17 | import Icon3DCursor from '~icons/carbon/3d-cursor' |
| 18 | |
| 19 | export default defineContextMenuSetup((items) => { |
| 20 | const { isPresenter } = useNav() |
| 21 | return computed(() => [ |
| 22 | ...items.value, |
| 23 | { |
| 24 | small: false, |
| 25 | icon: Icon3DCursor, // if `small` is `true`, only the icon is shown |
| 26 | label: 'Custom Menu Item', // or a Vue component |
| 27 | action() { |
| 28 | alert('Custom Menu Item Clicked!') |
| 29 | }, |
| 30 | disabled: isPresenter.value, |
| 31 | }, |
| 32 | ]) |
| 33 | }) |
| 34 | ``` |
| 35 | |
| 36 | This will append a new menu item to the context menu. |
| 37 | |
| 38 | To disable context menu globally, set `contextMenu` to `false` in the frontmatter. `contextMenu` can also be set to `dev` or `build` to only enable the context menu in development or build mode. |
| 39 |