0
# Context Menu System
1

2
Types for Slidev's context menu system, providing right-click menus and interactive options within presentations.
3

4
## Capabilities
5

6
### Context Menu Item Types
7

8
Union type for context menu items, supporting both options and separators.
9

10
```typescript { .api }
11
/**
12
 * Context menu item - either an option or separator
13
 */
14
type ContextMenuItem = ContextMenuOption | 'separator';
15
```
16

17
### Context Menu Option
18

19
Configuration interface for context menu options with different display modes.
20

21
```typescript { .api }
22
/**
23
 * Context menu option configuration
24
 */
25
type ContextMenuOption = {
26
  /** Function to execute when option is selected */
27
  action: () => void;
28
  /** Whether the option is disabled */
29
  disabled?: boolean;
30
} & (
31
  | {
32
    /** Not in small mode (default) */
33
    small?: false;
34
    /** Icon component or string identifier */
35
    icon?: Component | string;
36
    /** Label text or component */
37
    label: string | Component;
38
  }
39
  | {
40
    /** Small display mode */
41
    small: true;
42
    /** Icon component or string identifier (required in small mode) */
43
    icon: Component | string;
44
    /** Label text (must be string in small mode) */
45
    label: string;
46
  }
47
);
48
```
49

50
**Usage Examples:**
51

52
```typescript
53
import type { ContextMenuItem } from "@slidev/types";
54

55
// Regular context menu option
56
const printOption: ContextMenuItem = {
57
  label: "Print Slide",
58
  icon: "mdi:printer",
59
  action: () => window.print(),
60
  disabled: false
61
};
62

63
// Small context menu option
64
const shareOption: ContextMenuItem = {
65
  small: true,
66
  label: "Share",
67
  icon: "mdi:share",
68
  action: () => navigator.share({ title: "My Presentation" })
69
};
70

71
// Separator
72
const separator: ContextMenuItem = 'separator';
73

74
// Complete context menu
75
const contextMenuItems: ContextMenuItem[] = [
76
  printOption,
77
  shareOption,
78
  separator,
79
  {
80
    label: "Settings",
81
    action: () => openSettings()
82
  }
83
];
84
```
85

86
## Types
87

88
```typescript { .api }
89
import type { Component } from 'vue';
90
```