Components

Context Menu

Displays a menu at the pointer's position when the trigger is right-clicked or long-pressed.

Structure

	<script lang="ts">
  import { ContextMenu } from "bits-ui";
</script>
 
<ContextMenu.Root>
  <ContextMenu.Trigger />
 
  <ContextMenu.Content>
    <ContextMenu.Label />
    <ContextMenu.Item />
 
    <ContextMenu.Group>
      <ContextMenu.Item />
    </ContextMenu.Group>
 
    <ContextMenu.CheckboxItem>
      <ContextMenu.CheckboxIndicator />
    </ContextMenu.CheckboxItem>
 
    <ContextMenu.RadioGroup>
      <ContextMenu.RadioItem>
        <ContextMenu.RadioIndicator />
      </ContextMenu.RadioItem>
    </ContextMenu.RadioGroup>
 
    <ContextMenu.Sub>
      <ContextMenu.SubTrigger />
      <ContextMenu.SubContent />
    </ContextMenu.Sub>
 
    <ContextMenu.Separator />
    <ContextMenu.Arrow />
  </ContextMenu.Content>
</ContextMenu.Root>

	<script lang="ts">
  import { ContextMenu } from "bits-ui";
</script>
 
<ContextMenu.Root>
  <ContextMenu.Trigger />
 
  <ContextMenu.Content>
    <ContextMenu.Label />
    <ContextMenu.Item />
 
    <ContextMenu.Group>
      <ContextMenu.Item />
    </ContextMenu.Group>
 
    <ContextMenu.CheckboxItem>
      <ContextMenu.CheckboxIndicator />
    </ContextMenu.CheckboxItem>
 
    <ContextMenu.RadioGroup>
      <ContextMenu.RadioItem>
        <ContextMenu.RadioIndicator />
      </ContextMenu.RadioItem>
    </ContextMenu.RadioGroup>
 
    <ContextMenu.Sub>
      <ContextMenu.SubTrigger />
      <ContextMenu.SubContent />
    </ContextMenu.Sub>
 
    <ContextMenu.Separator />
    <ContextMenu.Arrow />
  </ContextMenu.Content>
</ContextMenu.Root>

Component API

Root

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

Prop	Default	Type/Description
`preventScroll`	`true`	`boolean` Whether or not to prevent scroll on the body when the context menu is open.
`closeOnEscape`	`true`	`boolean` Whether to close the context menu when the escape key is pressed.
`closeOnOutsideClick`	`true`	`boolean` Whether to close the context menu when a click occurs outside of it.
`loop`	`false`	`boolean` Whether or not to loop through the menu items when navigating with the keyboard.
`open`	`false`	`boolean` The open state of the context menu.
`onOpenChange`	-	`(open: boolean) => void` A callback that is fired when the context menu's open state changes.
`positioning`	-	`FloatingConfig` The positioning configuration for the context menu. (docs coming soon)

Trigger

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The context menu's open state.

Content

The content displayed when the context menu is open.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`transition`	-	`(node: Element, params?: any) => TransitionConfig` A Svelte transition function to use when transitioning the content in and out.
`transitionConfig`	-	`TransitionConfig` The Svelte `TransitionConfig` object to apply to the transition.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The collapsible's open state.

Item

A menu item within the context menu.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`disabled`	`false`	`boolean` Whether or not the menu item is disabled.

Data Attribute	Value/Description
`data-orientation`	`'horizontal' \| 'vertical'` The orientation of the context menu item.
`data-highlighted`	`''` Present when the menu item is highlighted.

CheckboxItem

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`disabled`	`false`	`boolean` Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.
`checked`	`false`	`boolean \| 'indeterminate'` The checkbox menu item's checked state.
`onCheckedChange`	-	`(checked: boolean \| 'indeterminate') => void` A callback that is fired when the checkbox menu item's checked state changes.

Data Attribute	Value/Description
`data-orientation`	`'horizontal' \| 'vertical'` The orientation of the checkbox menu item.

CheckboxIndicator

A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.

RadioGroup

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`value`	-	`string` The value of the currently checked radio menu item.
`onValueChange`	-	`(value: string) => void` A callback that is fired when the radio group's value changes.

RadioItem

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`value`	-	`string` The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value.
`disabled`	-	`false` Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.

RadioIndicator

A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked.

Separator

A horizontal line to visually separate menu items.

Arrow

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`size`	`8`	`number` The height and width of the arrow in pixels.

Data Attribute	Value/Description
`data-arrow`	`''` Present on the arrow elements of the context menu.

Group

A group of menu items. It can be used along with the `ContextMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.

Label

A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `ContextMenu.Group`, appropriate aria attributes will be applied to the group.

Sub

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

Prop	Default	Type/Description
`disabled`	-	`boolean` Whether or not the submenu is disabled.
`arrowSize`	`8`	`number` The size of the optional submenu arrow component in pixels.
`positioning`	-	`FloatingConfig` The positioning configuration for the context menu. (docs coming soon)

SubTrigger

A menu item which when pressed or hovered, opens the submenu.

Prop	Default	Type/Description
`disabled`	`false`	`boolean` Whether or not the submenu trigger is disabled.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The submenu's open state.
`data-disabled`	`''` Present when the submenu trigger is disabled.

SubContent

The submenu content displayed when the parent submenu is open.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`transition`	-	`(node: Element, params?: any) => TransitionConfig` A Svelte transition function to use when transitioning the content in and out.
`transitionConfig`	-	`TransitionConfig` The Svelte `TransitionConfig` object to apply to the transition.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The submenu's open state.

🚧 UNDER CONSTRUCTION 🚧