Context Menu

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/context-menu
Copy

Usage#

Copy<script lang="ts">
  import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>

Copy<ContextMenu.Root>
  <ContextMenu.Trigger>Right click here</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>

Examples#

Basic#

A simple context menu with a few actions.

Submenu#

Use ContextMenu.Sub to nest secondary actions.

Shortcuts#

Add ContextMenu.Shortcut to show keyboard hints.

Groups#

Group related actions and separate them with dividers.

Icons#

Combine icons with labels for quick scanning.

Checkboxes#

Use ContextMenu.CheckboxItem for toggles.

Radio#

Use ContextMenu.RadioItem for exclusive choices.

Destructive#

Use variant="destructive" to style the menu item as destructive.

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

See the Radix UI documentation for more information.