Context Menu

Displays options or actions relevant to a specific context or selected item, triggered by a right-click.

Right click me
	<script lang="ts">
  import { ContextMenu } from "bits-ui";
  import CopySimple from "phosphor-svelte/lib/CopySimple";
  import MouseSimple from "phosphor-svelte/lib/MouseSimple";
  import PencilSimpleLine from "phosphor-svelte/lib/PencilSimpleLine";
  import PlusCircle from "phosphor-svelte/lib/PlusCircle";
  import Trash from "phosphor-svelte/lib/Trash";
</script>
 
<ContextMenu.Root>
  <ContextMenu.Trigger
    class="flex h-[188px] w-[279px] select-none items-center justify-center rounded-card border-2 border-dashed border-border-input bg-transparent font-semibold text-muted-foreground"
  >
    <div class="flex flex-col items-center justify-center gap-4 text-center">
      <MouseSimple class="size-8" />
      Right click me
    </div>
  </ContextMenu.Trigger>
  <ContextMenu.Portal>
    <ContextMenu.Content
      class="focus-override w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none focus-visible:outline-none"
    >
      <ContextMenu.Item
        class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
      >
        <div class="flex items-center">
          <PencilSimpleLine class="mr-2 size-5 text-foreground-alt" />
          Edit
        </div>
        <div class="ml-auto flex items-center gap-px">
          <kbd
            class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
          >
            ⌘
          </kbd>
          <kbd
            class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
          >
            E
          </kbd>
        </div>
      </ContextMenu.Item>
      <ContextMenu.Sub>
        <ContextMenu.SubTrigger
          class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
        >
          <div class="flex items-center">
            <PlusCircle class="mr-2 size-5 text-foreground-alt" />
            Add
          </div>
          <div class="ml-auto flex items-center gap-px">
            <kbd
              class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
            >
              ⌘
            </kbd>
            <kbd
              class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
            >
              N
            </kbd>
          </div>
        </ContextMenu.SubTrigger>
        <ContextMenu.SubContent
          class="z-[100] w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover !ring-0 !ring-transparent"
          sideOffset={10}
        >
          <ContextMenu.Item
            class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
          >
            Header
          </ContextMenu.Item>
          <ContextMenu.Item
            class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
          >
            Paragraph
          </ContextMenu.Item>
          <ContextMenu.Item
            class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
          >
            Codeblock
          </ContextMenu.Item>
          <ContextMenu.Item
            class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
          >
            List
          </ContextMenu.Item>
          <ContextMenu.Item
            class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
          >
            Task
          </ContextMenu.Item>
        </ContextMenu.SubContent>
      </ContextMenu.Sub>
      <ContextMenu.Item
        class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
      >
        <div class="flex items-center">
          <CopySimple class="mr-2 size-5 text-foreground-alt" />
          Duplicate
        </div>
        <div class="ml-auto flex items-center gap-px">
          <kbd
            class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
          >
            ⌘
          </kbd>
          <kbd
            class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
          >
            D
          </kbd>
        </div>
      </ContextMenu.Item>
      <ContextMenu.Separator class="-mx-1 my-1 block h-px bg-muted" />
      <ContextMenu.Item
        class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
      >
        <div class="flex items-center">
          <Trash class="mr-2 size-5 text-foreground-alt" />
          Delete
        </div>
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Portal>
</ContextMenu.Root>

Structure

	<script lang="ts">
	import { ContextMenu } from "bits-ui";
</script>
 
<ContextMenu.Root>
	<ContextMenu.Trigger />
	<ContextMenu.Portal>
		<ContextMenu.Content>
			<ContextMenu.Group>
				<ContextMenu.GroupHeading />
				<ContextMenu.Item />
			</ContextMenu.Group>
 
			<ContextMenu.Item />
 
			<ContextMenu.CheckboxItem>
				{#snippet children({ checked })}
					{checked ? "✅" : ""}
				{/snippet}
			</ContextMenu.CheckboxItem>
 
			<ContextMenu.RadioGroup>
				<ContextMenu.GroupHeading />
				<ContextMenu.RadioItem>
					{#snippet children({ checked })}
						{checked ? "✅" : ""}
					{/snippet}
				</ContextMenu.RadioItem>
			</ContextMenu.RadioGroup>
 
			<ContextMenu.Sub>
				<ContextMenu.SubTrigger />
				<ContextMenu.SubContent />
			</ContextMenu.Sub>
 
			<ContextMenu.Separator />
			<ContextMenu.Arrow />
		</ContextMenu.Content>
	</ContextMenu.Portal>
</ContextMenu.Root>

Reusable Components

If you're planning to use Context Menu in multiple places, you can create a reusable component that wraps the Context Menu component.

This example shows you how to create a Context Menu component that accepts a few custom props that make it more capable.

CustomContextMenu.svelte
	<script lang="ts">
	import type { Snippet } from "svelte";
	import { ContextMenu, type WithoutChild } from "bits-ui";
	type Props = ContextMenu.Props & {
		trigger: Snippet;
		items: string[];
		contentProps?: WithoutChild<ContextMenu.Content.Props>;
		// other component props if needed
	};
	let {
		open = $bindable(false),
		children,
		trigger,
		items,
		contentProps,
		...restProps
	}: Props = $props();
</script>
 
<ContextMenu.Root bind:open {...restProps}>
	<ContextMenu.Trigger>
		{@render trigger()}
	</ContextMenu.Trigger>
	<ContextMenu.Portal>
		<ContextMenu.Content {...contentProps}>
			<ContextMenu.Group>
				<ContextMenu.GroupHeading>Select an Office</ContextMenu.GroupHeading>
				{#each items as item}
					<ContextMenu.Item textValue={item}>
						{item}
					</ContextMenu.Item>
				{/each}
			</ContextMenu.Group>
		</ContextMenu.Content>
	</ContextMenu.Portal>
</ContextMenu.Root>

You can then use the CustomContextMenu component like this:

	<script lang="ts">
	import CustomContextMenu from "./CustomContextMenu.svelte";
</script>
 
<CustomContextMenu items={["Dunder Mifflin", "Vance Refrigeration", "Michael Scott Paper Company"]}>
	{#snippet triggerArea()}
		<div class="grid size-20 place-items-center rounded-lg border border-dashed p-4">
			Right-click me
		</div>
	{/snippet}
</CustomContextMenu>

Alternatively, you can define the snippet(s) separately and pass them as props to the component:

	<script lang="ts">
	import CustomContextMenu from "./CustomContextMenu.svelte";
</script>
 
{#snippet triggerArea()}
	<div class="grid size-20 place-items-center rounded-lg border border-dashed p-4">
		Right-click me
	</div>
{/snippet}
 
<CustomContextMenu
	items={["Dunder Mifflin", "Vance Refrigeration", "Michael Scott Paper Company"]}
	{triggerArea}
/>

Managing Open State

Bits UI offers several approaches to manage and synchronize the Context Menu's open state, catering to different levels of control and integration needs.

1. Two-Way Binding

For seamless state synchronization, use Svelte's bind:open directive. This method automatically keeps your local state in sync with the component's internal state.

	<script lang="ts">
	import { ContextMenu } from "bits-ui";
	let isOpen = $state(false);
</script>
 
<button onclick={() => (isOpen = true)}>Open Context Menu</button>
 
<ContextMenu.Root bind:open={isOpen}>
	<!-- ... -->
</ContextMenu.Root>

Key Benefits

  • Simplifies state management
  • Automatically updates isOpen when the menu closes/opens (e.g., via escape key)
  • Allows external control (e.g., opening via a separate button)

2. Change Handler

For more granular control or to perform additional logic on state changes, use the onOpenChange prop. This approach is useful when you need to execute custom logic alongside state updates.

	<script lang="ts">
	import { ContextMenu } from "bits-ui";
	let isOpen = $state(false);
</script>
 
<ContextMenu.Root
	open={isOpen}
	onOpenChange={(o) => {
		isOpen = o;
		// additional logic here.
	}}
>
	<!-- ... -->
</ContextMenu.Root>

Use Cases

  • Implementing custom behaviors on open/close
  • Integrating with external state management solutions
  • Triggering side effects (e.g., logging, data fetching)

3. Fully Controlled

For complete control over the dialog's open state, use the controlledOpen prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events.

To implement controlled state:

  1. Set the controlledOpen prop to true on the ContextMenu.Root component.
  2. Provide an open prop to ContextMenu.Root, which should be a variable holding the current state.
  3. Implement an onOpenChange handler to update the state when the internal state changes.
	<script lang="ts">
	import { ContextMenu } from "bits-ui";
	let myOpen = $state(false);
</script>
 
<ContextMenu.Root controlledOpen open={myOpen} onOpenChange={(o) => (myOpen = o)}>
	<!-- ... -->
</ContextMenu.Root>

When to Use

  • Implementing complex open/close logic
  • Coordinating multiple UI elements
  • Debugging state-related issues

Checkbox Items

You can use the ContextMenu.CheckboxItem component to create a menuitemcheckbox element to add checkbox functionality to menu items.

	<script lang="ts">
	import { ContextMenu } from "bits-ui";
 
	let notifications = $state(true);
</script>
 
<ContextMenu.CheckboxItem bind:checked={notifications}>
	{#snippet children({ checked, indeterminate })}
		{#if indeterminate}
			-
		{:else if checked}
			✅
		{/if}
		Notifications
	{/snippet}
</ContextMenu.CheckboxItem>

See the CheckboxItem API for more information.

Radio Groups

You can combine the ContextMenu.RadioGroup and ContextMenu.RadioItem components to create a radio group within a menu.

	<script lang="ts">
	import { ContextMenu } from "bits-ui";
 
	const values = ["one", "two", "three"];
	let value = $state("one");
</script>
 
<ContextMenu.RadioGroup bind:value>
	{#each values as value}
		<ContextMenu.RadioItem {value}>
			{#snippet children({ checked })}
				{#if checked}
					✅
				{/if}
				{value}
			{/snippet}
		</ContextMenu.RadioItem>
	{/each}
</ContextMenu.RadioGroup>

See the RadioGroup and RadioItem APIs for more information.

Nested Menus

You can create nested menus using the ContextMenu.Sub component to create complex menu structures.

	<script lang="ts">
	import { ContextMenu } from "bits-ui";
</script>
 
<ContextMenu.Content>
	<ContextMenu.Item>Item 1</ContextMenu.Item>
	<ContextMenu.Item>Item 2</ContextMenu.Item>
	<ContextMenu.Sub>
		<ContextMenu.SubTrigger>Open Sub Menu</ContextMenu.SubTrigger>
		<ContextMenu.SubContent>
			<ContextMenu.Item>Sub Item 1</ContextMenu.Item>
			<ContextMenu.Item>Sub Item 2</ContextMenu.Item>
		</ContextMenu.SubContent>
	</ContextMenu.Sub>
</ContextMenu.Content>

Svelte Transitions

You can use the forceMount prop along with the child snippet to forcefully mount the ContextMenu.Content component to use Svelte Transitions or another animation library that requires more control.

	<script lang="ts">
	import { ContextMenu } from "bits-ui";
	import { fly } from "svelte/transition";
</script>
 
<ContextMenu.Content forceMount>
	{#snippet child({ wrapperProps, props, open })}
		{#if open}
			<div {...wrapperProps}>
				<div {...props} transition:fly>
					<ContextMenu.Item>Item 1</ContextMenu.Item>
					<ContextMenu.Item>Item 2</ContextMenu.Item>
				</div>
			</div>
		{/if}
	{/snippet}
</ContextMenu.Content>

Of course, this isn't the prettiest syntax, so it's recommended to create your own reusable content component that handles this logic if you intend to use this approach. For more information on using transitions with Bits UI components, see the Transitions documentation.

Right click me
	<script lang="ts">
  import { ContextMenu } from "bits-ui";
  import CopySimple from "phosphor-svelte/lib/CopySimple";
  import MouseSimple from "phosphor-svelte/lib/MouseSimple";
  import PencilSimpleLine from "phosphor-svelte/lib/PencilSimpleLine";
  import PlusCircle from "phosphor-svelte/lib/PlusCircle";
  import Trash from "phosphor-svelte/lib/Trash";
  import { fly } from "svelte/transition";
</script>
 
<ContextMenu.Root>
  <ContextMenu.Trigger
    class="flex h-[188px] w-[279px] select-none items-center justify-center rounded-card border-2 border-dashed border-border-input bg-transparent font-semibold text-muted-foreground"
  >
    <div class="flex flex-col items-center justify-center gap-4 text-center">
      <MouseSimple class="size-8" />
      Right click me
    </div>
  </ContextMenu.Trigger>
  <ContextMenu.Portal>
    <ContextMenu.Content
      class="focus-override w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none focus-visible:outline-none"
      forceMount
    >
      {#snippet child({ wrapperProps, props, open })}
        {#if open}
          <div {...wrapperProps}>
            <div {...props} transition:fly={{ duration: 300 }}>
              <ContextMenu.Item
                class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
              >
                <div class="flex items-center">
                  <PencilSimpleLine class="mr-2 size-5 text-foreground-alt" />
                  Edit
                </div>
                <div class="ml-auto flex items-center gap-px">
                  <kbd
                    class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
                  >
                    ⌘
                  </kbd>
                  <kbd
                    class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
                  >
                    E
                  </kbd>
                </div>
              </ContextMenu.Item>
              <ContextMenu.Sub>
                <ContextMenu.SubTrigger
                  class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
                >
                  <div class="flex items-center">
                    <PlusCircle class="mr-2 size-5 text-foreground-alt" />
                    Add
                  </div>
                  <div class="ml-auto flex items-center gap-px">
                    <kbd
                      class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
                    >
                      ⌘
                    </kbd>
                    <kbd
                      class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
                    >
                      N
                    </kbd>
                  </div>
                </ContextMenu.SubTrigger>
                <ContextMenu.SubContent
                  class="z-[100] w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover !ring-0 !ring-transparent"
                  sideOffset={10}
                >
                  <ContextMenu.Item
                    class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
                  >
                    Header
                  </ContextMenu.Item>
                  <ContextMenu.Item
                    class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
                  >
                    Paragraph
                  </ContextMenu.Item>
                  <ContextMenu.Item
                    class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
                  >
                    Codeblock
                  </ContextMenu.Item>
                  <ContextMenu.Item
                    class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
                  >
                    List
                  </ContextMenu.Item>
                  <ContextMenu.Item
                    class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
                  >
                    Task
                  </ContextMenu.Item>
                </ContextMenu.SubContent>
              </ContextMenu.Sub>
              <ContextMenu.Item
                class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
              >
                <div class="flex items-center">
                  <CopySimple class="mr-2 size-5 text-foreground-alt" />
                  Duplicate
                </div>
                <div class="ml-auto flex items-center gap-px">
                  <kbd
                    class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[13px] text-muted-foreground shadow-kbd"
                  >
                    ⌘
                  </kbd>
                  <kbd
                    class="inline-flex size-5 items-center justify-center rounded-button border border-dark-10 bg-background-alt text-[11px] text-muted-foreground shadow-kbd"
                  >
                    D
                  </kbd>
                </div>
              </ContextMenu.Item>
              <ContextMenu.Separator class="-mx-1 my-1 block h-px bg-muted" />
              <ContextMenu.Item
                class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none !ring-0 !ring-transparent data-[highlighted]:bg-muted"
              >
                <div class="flex items-center">
                  <Trash class="mr-2 size-5 text-foreground-alt" />
                  Delete
                </div>
              </ContextMenu.Item>
            </div>
          </div>
        {/if}
      {/snippet}
    </ContextMenu.Content>
  </ContextMenu.Portal>
</ContextMenu.Root>

API Reference

ContextMenu.Root

The root component which manages & scopes the state of the context menu.

Property Type Description
open $bindable
boolean

The open state of the menu.

Default: false
onOpenChange
function

A callback that is fired when the menu's open state changes.

Default: undefined
controlledOpen
boolean

Whether or not the open state is controlled or not. If true, the component will not update the open state internally, instead it will call onOpenChange when it would have otherwise, and it is up to you to update the open prop that is passed to the component.

Default: false
dir
enum

The reading direction of the app.

Default: ltr
children
Snippet

The children content to render.

Default: undefined

ContextMenu.Trigger

The element which when right-clicked, opens the context menu.

Property Type Description
disabled
boolean

Whether or not the menu trigger is disabled.

Default: false
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The open state of the menu or submenu the element controls or belongs to.

data-menu-trigger
''

Present on the trigger element.

ContextMenu.Portal

A component that portals the content of the dropdown menu to the body or a custom target (if provided).

Property Type Description
to
union

Where to render the content when it is open. Defaults to the body. Can be disabled by passing null

Default: body
disabled
boolean

Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.

Default: false
children
Snippet

The children content to render.

Default: undefined

ContextMenu.Content

The content displayed when the context menu is open.

Property Type Description
alignOffset
number

The distance in pixels from the anchor to the floating element.

Default: 0
arrowPadding
number

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

Default: 0
avoidCollisions
boolean

When true, overrides the side and align options to prevent collisions with the boundary edges.

Default: true
collisionBoundary
union

A boundary element or array of elements to check for collisions against.

Default: undefined
collisionPadding
union

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

Default: 0
sticky
enum

The sticky behavior on the align axis. 'partial' will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst 'always' will keep the content in the boundary regardless.

Default: partial
hideWhenDetached
boolean

When true, hides the content when it is detached from the DOM. This is useful for when you want to hide the content when the user scrolls away.

Default: true
updatePositionStrategy
enum

The strategy to use when updating the position of the content. When 'optimized' the content will only be repositioned when the trigger is in the viewport. When 'always' the content will be repositioned whenever the position changes.

Default: optimized
strategy
enum

The positioning strategy to use for the floating element. When 'fixed' the element will be positioned relative to the viewport. When 'absolute' the element will be positioned relative to the nearest positioned ancestor.

Default: fixed
preventScroll
boolean

When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.

Default: true
customAnchor
union

Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger.

Default: null
onEscapeKeydown
function

Callback fired when an escape keydown event occurs in the floating content. You can call event.preventDefault() to prevent the default behavior of handling the escape keydown event.

Default: undefined
escapeKeydownBehavior
enum

The behavior to use when an escape keydown event occurs in the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onInteractOutside
function

Callback fired when an outside interaction event occurs, which is a pointerdown event. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Default: undefined
onFocusOutside
function

Callback fired when focus leaves the dismissible layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

Default: undefined
interactOutsideBehavior
enum

The behavior to use when an interaction occurs outside of the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onOpenAutoFocus
function

Event handler called when auto-focusing the content as it is opened. Can be prevented.

Default: undefined
onCloseAutoFocus
function

Event handler called when auto-focusing the content as it is closed. Can be prevented.

Default: undefined
trapFocus
boolean

Whether or not to trap the focus within the content when open.

Default: true
preventOverflowTextSelection
boolean

When true, prevents the text selection from overflowing the bounds of the element.

Default: true
dir
enum

The reading direction of the app.

Default: ltr
forceMount
boolean

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

Default: false
loop
boolean

Whether or not the context menu should loop through items when reaching the end.

Default: false
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The open state of the menu or submenu the element controls or belongs to.

data-menu-content
''

Present on the content element.

CSS Variable Description
--bits-context-menu-content-transform-origin

The transform origin of the context menu content element.

--bits-context-menu-content-available-width

The available width of the context menu content element.

--bits-context-menu-content-available-height

The available height of the context menu content element.

--bits-context-menu-anchor-width

The width of the context menu trigger element.

--bits-context-menu-anchor-height

The height of the context menu trigger element.

ContextMenu.ContentStatic

The content displayed when the context menu is open. (Static/No Floating UI)

Property Type Description
onEscapeKeydown
function

Callback fired when an escape keydown event occurs in the floating content. You can call event.preventDefault() to prevent the default behavior of handling the escape keydown event.

Default: undefined
escapeKeydownBehavior
enum

The behavior to use when an escape keydown event occurs in the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onInteractOutside
function

Callback fired when an outside interaction event occurs, which is a pointerdown event. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Default: undefined
onFocusOutside
function

Callback fired when focus leaves the dismissible layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

Default: undefined
interactOutsideBehavior
enum

The behavior to use when an interaction occurs outside of the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onOpenAutoFocus
function

Event handler called when auto-focusing the content as it is opened. Can be prevented.

Default: undefined
onCloseAutoFocus
function

Event handler called when auto-focusing the content as it is closed. Can be prevented.

Default: undefined
trapFocus
boolean

Whether or not to trap the focus within the content when open.

Default: true
preventScroll
boolean

When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.

Default: true
preventOverflowTextSelection
boolean

When true, prevents the text selection from overflowing the bounds of the element.

Default: true
dir
enum

The reading direction of the app.

Default: ltr
forceMount
boolean

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

Default: false
loop
boolean

Whether or not the context menu should loop through items when reaching the end.

Default: false
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The open state of the menu or submenu the element controls or belongs to.

data-menu-content
''

Present on the content element.

ContextMenu.Item

A menu item within the context menu.

Property Type Description
disabled
boolean

Whether or not the menu item is disabled.

Default: false
textValue
string

The text value of the checkbox menu item. This is used for typeahead.

Default: undefined
onSelect
function

A callback that is fired when the menu item is selected.

Default: undefined
closeOnSelect
boolean

Whether or not the menu item should close when selected.

Default: true
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-orientation
'vertical'
data-highlighted
''

Present when the menu item is highlighted.

data-disabled
''

Present when the menu item is disabled.

data-menu-item
''

Present on the item element.

ContextMenu.CheckboxItem

A menu item that can be controlled and toggled like a checkbox.

Property Type Description
disabled
boolean

Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.

Default: false
checked $bindable
boolean

The checkbox menu item's checked state.

Default: false
onCheckedChange
function

A callback that is fired when the checkbox menu item's checked state changes.

Default: undefined
controlledChecked
boolean

Whether or not the checked state is controlled or not. If true, the component will not update the checked state internally, instead it will call onCheckedChange when it would have otherwise, and it is up to you to update the checked prop that is passed to the component.

Default: false
indeterminate $bindable
boolean

Whether the checkbox menu item is in an indeterminate state or not.

Default: false
onIndeterminateChange
function

A callback that is fired when the indeterminate state changes.

Default: undefined
controlledIndeterminate
boolean

Whether or not the indeterminate state is controlled or not. If true, the component will not update the indeterminate state internally, instead it will call onIndeterminateChange when it would have otherwise, and it is up to you to update the indeterminate prop that is passed to the component.

Default: false
textValue
string

The text value of the checkbox menu item. This is used for typeahead.

Default: undefined
onSelect
function

A callback that is fired when the menu item is selected.

Default: undefined
closeOnSelect
boolean

Whether or not the menu item should close when selected.

Default: true
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-orientation
'vertical'
data-highlighted
''

Present when the menu item is highlighted.

data-disabled
''

Present when the menu item is disabled.

data-state
enum

The checkbox menu item's checked state.

ContextMenu.RadioGroup

A group of radio menu items, where only one can be checked at a time.

Property Type Description
value $bindable
string

The value of the currently checked radio menu item.

Default: undefined
onValueChange
function

A callback that is fired when the radio group's value changes.

Default: undefined
controlledValue
boolean

Whether or not the value is controlled or not. If true, the component will not update the value state internally, instead it will call onValueChange when it would have otherwise, and it is up to you to update the value prop that is passed to the component.

Default: false
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-menu-radio-group
''

Present on the radio group element.

ContextMenu.RadioItem

A menu item that can be controlled and toggled like a radio button. It must be a child of a RadioGroup.

Property Type Description
value required
string

The value of the radio item. When checked, the parent RadioGroup's value will be set to this value.

Default: undefined
disabled
boolean

Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.

Default: false
textValue
string

The text value of the checkbox menu item. This is used for typeahead.

Default: undefined
onSelect
function

A callback that is fired when the menu item is selected.

Default: undefined
closeOnSelect
boolean

Whether or not the menu item should close when selected.

Default: true
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-orientation
'vertical'
data-highlighted
''

Present when the menu item is highlighted.

data-disabled
''

Present when the menu item is disabled.

data-state
enum

The radio menu item's checked state.

data-value
''

The value of the radio item.

data-menu-radio-item
''

Present on the radio item element.

ContextMenu.Separator

A horizontal line to visually separate menu items.

Property Type Description
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-orientation
'vertical'

The orientation of the separator.

data-menu-separator
''

Present on the separator element.

ContextMenu.Arrow

An optional arrow which points to the context menu's anchor/trigger point.

Property Type Description
width
number

The width of the arrow in pixels.

Default: 8
height
number

The height of the arrow in pixels.

Default: 8
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The open state of the menu or submenu the element controls or belongs to.

data-menu-arrow
''

Present on the arrow element.

ContextMenu.Group

A group of menu items. It should be passed an aria-label or have a child Menu.GroupHeading component to provide a label for a group of menu items.

Property Type Description
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-menu-group
''

Present on the group element.

ContextMenu.GroupHeading

A heading for a group which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items and must be a child of either a ContextMenu.Group or ContextMenu.RadioGroup component.

Property Type Description
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-menu-group-heading
''

Present on the group heading element.

ContextMenu.Sub

A submenu belonging to the parent context menu. Responsible for managing the state of the submenu.

Property Type Description
open $bindable
boolean

The open state of the submenu.

Default: false
onOpenChange
function

A callback that is fired when the submenu's open state changes.

Default: undefined
controlledOpen
boolean

Whether or not the open state is controlled or not. If true, the component will not update the open state internally, instead it will call onOpenChange when it would have otherwise, and it is up to you to update the open prop that is passed to the component.

Default: false
children
Snippet

The children content to render.

Default: undefined

ContextMenu.SubTrigger

A menu item which when pressed or hovered, opens the submenu it is a child of.

Property Type Description
disabled
boolean

Whether or not the submenu trigger is disabled.

Default: false
textValue
string

The text value of the checkbox menu item. This is used for typeahead.

Default: undefined
onSelect
function

A callback that is fired when the menu item is selected.

Default: undefined
closeOnSelect
boolean

Whether or not the menu item should close when selected.

Default: true
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-orientation
'vertical'
data-highlighted
''

Present when the menu item is highlighted.

data-disabled
''

Present when the menu item is disabled.

data-state
enum

The open state of the menu or submenu the element controls or belongs to.

data-menu-sub-trigger
''

Present on the submenu trigger element.

ContextMenu.SubContent

The submenu content displayed when the parent submenu is open.

Property Type Description
side
enum

The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.

Default: bottom
sideOffset
number

The distance in pixels from the anchor to the floating element.

Default: 0
align
enum

The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.

Default: start
alignOffset
number

The distance in pixels from the anchor to the floating element.

Default: 0
arrowPadding
number

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

Default: 0
avoidCollisions
boolean

When true, overrides the side and align options to prevent collisions with the boundary edges.

Default: true
collisionBoundary
union

A boundary element or array of elements to check for collisions against.

Default: undefined
collisionPadding
union

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

Default: 0
sticky
enum

The sticky behavior on the align axis. 'partial' will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst 'always' will keep the content in the boundary regardless.

Default: partial
hideWhenDetached
boolean

When true, hides the content when it is detached from the DOM. This is useful for when you want to hide the content when the user scrolls away.

Default: true
updatePositionStrategy
enum

The strategy to use when updating the position of the content. When 'optimized' the content will only be repositioned when the trigger is in the viewport. When 'always' the content will be repositioned whenever the position changes.

Default: optimized
strategy
enum

The positioning strategy to use for the floating element. When 'fixed' the element will be positioned relative to the viewport. When 'absolute' the element will be positioned relative to the nearest positioned ancestor.

Default: fixed
preventScroll
boolean

When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.

Default: true
customAnchor
union

Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger.

Default: null
onEscapeKeydown
function

Callback fired when an escape keydown event occurs in the floating content. You can call event.preventDefault() to prevent the default behavior of handling the escape keydown event.

Default: undefined
escapeKeydownBehavior
enum

The behavior to use when an escape keydown event occurs in the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onInteractOutside
function

Callback fired when an outside interaction event occurs, which is a pointerdown event. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Default: undefined
onFocusOutside
function

Callback fired when focus leaves the dismissible layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

Default: undefined
interactOutsideBehavior
enum

The behavior to use when an interaction occurs outside of the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onOpenAutoFocus
function

Event handler called when auto-focusing the content as it is opened. Can be prevented.

Default: undefined
onCloseAutoFocus
function

Event handler called when auto-focusing the content as it is closed. Can be prevented.

Default: undefined
trapFocus
boolean

Whether or not to trap the focus within the content when open.

Default: true
forceMount
boolean

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

Default: false
preventOverflowTextSelection
boolean

When true, prevents the text selection from overflowing the bounds of the element.

Default: true
dir
enum

The reading direction of the app.

Default: ltr
loop
boolean

Whether or not to loop through the menu items in when navigating with the keyboard.

Default: false
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The open state of the menu or submenu the element controls or belongs to.

data-menu-sub-content
''

Present on the submenu content element.

ContextMenu.SubContentStatic

The submenu content displayed when the parent submenu menu is open. (Static/No Floating UI)

Property Type Description
onEscapeKeydown
function

Callback fired when an escape keydown event occurs in the floating content. You can call event.preventDefault() to prevent the default behavior of handling the escape keydown event.

Default: undefined
escapeKeydownBehavior
enum

The behavior to use when an escape keydown event occurs in the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onInteractOutside
function

Callback fired when an outside interaction event occurs, which is a pointerdown event. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Default: undefined
onFocusOutside
function

Callback fired when focus leaves the dismissible layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

Default: undefined
interactOutsideBehavior
enum

The behavior to use when an interaction occurs outside of the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onOpenAutoFocus
function

Event handler called when auto-focusing the content as it is opened. Can be prevented.

Default: undefined
onCloseAutoFocus
function

Event handler called when auto-focusing the content as it is closed. Can be prevented.

Default: undefined
trapFocus
boolean

Whether or not to trap the focus within the content when open.

Default: true
forceMount
boolean

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

Default: false
preventOverflowTextSelection
boolean

When true, prevents the text selection from overflowing the bounds of the element.

Default: true
dir
enum

The reading direction of the app.

Default: ltr
loop
boolean

Whether or not to loop through the menu items when reaching the end of the list when using the keyboard.

Default: true
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

The open state of the menu or submenu the element controls or belongs to.

data-menu-sub-content
''

Present on the submenu content element.