Context Menu

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

	<script lang="ts">
  import * as ContextMenu from "@/components//ui/context-menu";
 
  let showBookmarks = false;
  let showFullURLs = true;
 
  let value = "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.Label inset>People</ContextMenu.Label>
      <ContextMenu.Separator />
      <ContextMenu.RadioItem value="pedro"
        >Pedro Duarte</ContextMenu.RadioItem
      >
      <ContextMenu.RadioItem value="colm"
        >Colm Tuite</ContextMenu.RadioItem
      >
    </ContextMenu.RadioGroup>
  </ContextMenu.Content>
</ContextMenu.Root>

	<script lang="ts">
  import * as ContextMenu from "@/components//ui/context-menu";
 
  let showBookmarks = false;
  let showFullURLs = true;
 
  let value = "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.Label inset>People</ContextMenu.Label>
      <ContextMenu.Separator />
      <ContextMenu.RadioItem value="pedro"
        >Pedro Duarte</ContextMenu.RadioItem
      >
      <ContextMenu.RadioItem value="colm"
        >Colm Tuite</ContextMenu.RadioItem
      >
    </ContextMenu.RadioGroup>
  </ContextMenu.Content>
</ContextMenu.Root>

Right click here

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

ContextMenu.Root

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

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

ContextMenu.Trigger

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

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

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

ContextMenu.Content

The content displayed when the context menu is open.

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

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

ContextMenu.Item

A menu item within the context menu.

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

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

ContextMenu.CheckboxItem

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

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`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`	`boolean \| 'indeterminate'`	The checkbox menu item's checked state. `Default: false`
`onCheckedChange`	`(checked: boolean \| 'indeterminate') => void`	A callback that is fired when the checkbox menu item's checked state changes. `Default: undefined`

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

ContextMenu.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.

ContextMenu.RadioGroup

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

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

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
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`value`	`string`	The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value. `Default: undefined`
`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. `Default: undefined`

ContextMenu.RadioIndicator

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

ContextMenu.Separator

A horizontal line to visually separate menu items.

ContextMenu.Arrow

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

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

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

ContextMenu.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.

ContextMenu.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.

ContextMenu.Sub

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

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

ContextMenu.SubTrigger

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

Property	Type	Description
`disabled`	`boolean`	Whether or not the submenu trigger is disabled. `Default: false`

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

ContextMenu.SubContent

The submenu content displayed when the parent submenu is open.

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

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

🚧 UNDER CONSTRUCTION 🚧