Docs
Context Menu
Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by right click.
<script lang="ts">
import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
let showBookmarks = $state(false);
let showFullURLs = $state(true);
let value = $state("pedro");
</script>
<ContextMenu.Root>
<ContextMenu.Trigger
class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
>
Right click here
</ContextMenu.Trigger>
<ContextMenu.Content class="w-64">
<ContextMenu.Item inset>
Back
<ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item inset>
Forward
<ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item inset>
Reload
<ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.SubTrigger inset>More Tools</ContextMenu.SubTrigger>
<ContextMenu.SubContent class="w-48">
<ContextMenu.Item>
Save Page As...
<ContextMenu.Shortcut>⇧⌘S</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
<ContextMenu.Item>Name Window...</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>Developer Tools</ContextMenu.Item>
</ContextMenu.SubContent>
</ContextMenu.Sub>
<ContextMenu.Separator />
<ContextMenu.CheckboxItem bind:checked={showBookmarks}>
Show Bookmarks Bar
<ContextMenu.Shortcut>⌘⇧B</ContextMenu.Shortcut>
</ContextMenu.CheckboxItem>
<ContextMenu.CheckboxItem bind:checked={showFullURLs}>
Show Full URLs
</ContextMenu.CheckboxItem>
<ContextMenu.Separator />
<ContextMenu.RadioGroup bind:value>
<ContextMenu.Group>
<ContextMenu.GroupHeading inset>People</ContextMenu.GroupHeading>
<ContextMenu.Separator />
<ContextMenu.RadioItem value="pedro">Pedro Duarte</ContextMenu.RadioItem
>
<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
</ContextMenu.Group>
</ContextMenu.RadioGroup>
</ContextMenu.Content>
</ContextMenu.Root>
<script lang="ts">
import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
let showBookmarks = $state(false);
let showFullURLs = $state(true);
let value = $state("pedro");
</script>
<ContextMenu.Root>
<ContextMenu.Trigger
class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
>
Right click here
</ContextMenu.Trigger>
<ContextMenu.Content class="w-64">
<ContextMenu.Item inset>
Back
<ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item inset>
Forward
<ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item inset>
Reload
<ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.SubTrigger inset>More Tools</ContextMenu.SubTrigger>
<ContextMenu.SubContent class="w-48">
<ContextMenu.Item>
Save Page As...
<ContextMenu.Shortcut>⇧⌘S</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
<ContextMenu.Item>Name Window...</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>Developer Tools</ContextMenu.Item>
</ContextMenu.SubContent>
</ContextMenu.Sub>
<ContextMenu.Separator />
<ContextMenu.CheckboxItem bind:checked={showBookmarks}>
Show Bookmarks Bar
<ContextMenu.Shortcut>⌘⇧B</ContextMenu.Shortcut>
</ContextMenu.CheckboxItem>
<ContextMenu.CheckboxItem bind:checked={showFullURLs}>
Show Full URLs
</ContextMenu.CheckboxItem>
<ContextMenu.Separator />
<ContextMenu.RadioGroup bind:value>
<ContextMenu.Group>
<ContextMenu.GroupHeading inset>People</ContextMenu.GroupHeading>
<ContextMenu.Separator />
<ContextMenu.RadioItem value="pedro">Pedro Duarte</ContextMenu.RadioItem
>
<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
</ContextMenu.Group>
</ContextMenu.RadioGroup>
</ContextMenu.Content>
</ContextMenu.Root>
Installation
npx shadcn-svelte@next add context-menu
Install bits-ui:
npm install bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
<ContextMenu.Root>
<ContextMenu.Trigger>Right click</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item>Profile</ContextMenu.Item>
<ContextMenu.Item>Billing</ContextMenu.Item>
<ContextMenu.Item>Team</ContextMenu.Item>
<ContextMenu.Item>Subscription</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Root>
On This Page