Context Menu

1<script lang="ts">
2	import * as ContextMenu from './index.js';
3
4	let showBookmarks = $state(false);
5	let showFullURLs = $state(true);
6	let value = $state('pedro');
7</script>
8
9<ContextMenu.Root>
10	<ContextMenu.Trigger
11		class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
12	>
13		Right click here
14	</ContextMenu.Trigger>
15	<ContextMenu.Content class="w-52">
16		<ContextMenu.Item inset>
17			Back
18			<ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
19		</ContextMenu.Item>
20		<ContextMenu.Item inset disabled>
21			Forward
22			<ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
23		</ContextMenu.Item>
24		<ContextMenu.Item inset>
25			Reload
26			<ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
27		</ContextMenu.Item>
28		<ContextMenu.Sub>
29			<ContextMenu.SubTrigger inset>More Tools</ContextMenu.SubTrigger>
30			<ContextMenu.SubContent class="w-48">
31				<ContextMenu.Item>
32					Save Page As...
33					<ContextMenu.Shortcut>⇧⌘S</ContextMenu.Shortcut>
34				</ContextMenu.Item>
35				<ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
36				<ContextMenu.Item>Name Window...</ContextMenu.Item>
37				<ContextMenu.Separator />
38				<ContextMenu.Item>Developer Tools</ContextMenu.Item>
39			</ContextMenu.SubContent>
40		</ContextMenu.Sub>
41		<ContextMenu.Separator />
42		<ContextMenu.CheckboxItem bind:checked={showBookmarks}>Show Bookmarks</ContextMenu.CheckboxItem>
43		<ContextMenu.CheckboxItem bind:checked={showFullURLs}>Show Full URLs</ContextMenu.CheckboxItem>
44		<ContextMenu.Separator />
45		<ContextMenu.RadioGroup bind:value>
46			<ContextMenu.Group>
47				<ContextMenu.GroupHeading inset>People</ContextMenu.GroupHeading>
48				<ContextMenu.RadioItem value="pedro">Pedro Duarte</ContextMenu.RadioItem>
49				<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
50			</ContextMenu.Group>
51		</ContextMenu.RadioGroup>
52	</ContextMenu.Content>
53</ContextMenu.Root>
54