Skip to content
omaris · Learn
Containment

Context Menu

The right-click menu.

Full reference: every prop and when to use it →

Walkthrough

1. Basic

Right-click the card — or press and hold it on a touch screen.

Right-click, or press and hold

Last action: nothing yet

<script lang="ts">	import { ContextMenu, MenuItem, Divider } from 'omaris';​	let last = $state('nothing yet');</script>​<div class="flex flex-col items-center gap-3">	<ContextMenu label="File actions">		{#snippet trigger()}			<div				class="grid h-32 w-72 max-w-full place-items-center rounded-shape-md border border-dashed border-border bg-surface-container-low text-sm text-muted-foreground"			>				Right-click, or press and hold			</div>		{/snippet}		<MenuItem onclick={() => (last = 'Open')} shortcut="⏎">Open</MenuItem>		<MenuItem onclick={() => (last = 'Rename')} shortcut="F2">Rename</MenuItem>		<Divider />		<MenuItem tone="destructive" onclick={() => (last = 'Delete')}>Delete</MenuItem>	</ContextMenu>	<p class="text-sm text-muted-foreground">Last action: {last}</p></div>

2. Per row

One menu per row: each list item wraps its own, with its own actions.

report.pdf right-click
notes.md right-click
budget.xlsx right-click

Last action: nothing yet

<script lang="ts">	import { ContextMenu, MenuItem, MenuLabel, Divider } from 'omaris';​	const files = ['report.pdf', 'notes.md', 'budget.xlsx'];	let last = $state('nothing yet');</script>​<div class="flex flex-col items-center gap-3">	<div class="w-72 max-w-full overflow-hidden rounded-shape-md border border-border">		{#each files as file (file)}			<ContextMenu label="{file} actions">				{#snippet trigger()}					<div						class="flex items-center justify-between border-b border-border px-3 py-2.5 text-sm last:border-b-0 hover:bg-surface-container"					>						{file}						<span class="text-xs text-muted-foreground">right-click</span>					</div>				{/snippet}				<MenuLabel>{file}</MenuLabel>				<MenuItem onclick={() => (last = `Open ${file}`)}>Open</MenuItem>				<MenuItem onclick={() => (last = `Share ${file}`)}>Share</MenuItem>				<Divider />				<MenuItem tone="destructive" onclick={() => (last = `Delete ${file}`)}>Delete</MenuItem>			</ContextMenu>		{/each}	</div>	<p class="text-sm text-muted-foreground">Last action: {last}</p></div>

3. Overridden

closeOnSelect={false} keeps the menu open while a set of toggles is worked through, and the surface takes its own width.

Toggles that stay open
<script lang="ts">	import { ContextMenu, MenuItem, MenuLabel } from 'omaris';​	let pinned = $state(true);	let dense = $state(false);</script>​<ContextMenu label="View" closeOnSelect={false} classes={{ surface: 'min-w-64 rounded-shape-lg' }}>	{#snippet trigger()}		<div			class="grid h-32 w-72 max-w-full place-items-center rounded-shape-md border border-dashed border-border bg-surface-container-low text-sm text-muted-foreground"		>			Toggles that stay open		</div>	{/snippet}	<MenuLabel>View</MenuLabel>	<MenuItem selected={pinned} onclick={() => (pinned = !pinned)}>Pinned first</MenuItem>	<MenuItem selected={dense} onclick={() => (dense = !dense)}>Dense rows</MenuItem></ContextMenu>