Radix Vue

Appearance

Context Menu ​

Displays a menu located at the pointer, triggered by a right-click or a long-press.
Right click here.

Features ​

  • Supports submenus with configurable reading direction.
  • Supports items, labels, groups of items.
  • Supports checkable items (single or multiple) with optional indeterminate state.
  • Supports modal and non-modal modes.
  • Customize side, alignment, offsets, collision handling.
  • Focus is fully managed.
  • Full keyboard navigation.
  • Typeahead support.
  • Dismissing and layering behavior is highly customizable.
  • Triggers with a long-press on touch devices

Installation ​

Install the component from your command line.

bash
npm install radix-vue

Anatomy ​

Import all parts and piece them together.

vue
<script setup lang="ts">
import {
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger />

    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuLabel />
        <ContextMenuItem />

        <ContextMenuGroup>
          <ContextMenuItem />
        </ContextMenuGroup>

        <ContextMenuCheckboxItem>
          <ContextMenuItemIndicator />
        </ContextMenuCheckboxItem>

        <ContextMenuRadioGroup>
          <ContextMenuRadioItem>
            <ContextMenuItemIndicator />
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>

        <ContextMenuSub>
          <ContextMenuSubTrigger />
          <ContextMenuPortal>
            <ContextMenuSubContent />
          </ContextMenuPortal>
        </ContextMenuSub>

        <ContextMenuSeparator />
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

API Reference ​

Adheres to the Menu WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.

Root ​

Contains all the parts of a context menu.

PropTypeDefault
dir
enum
modal
boolean
true
EmitType
@update:open
(open: boolean) => void

Trigger ​

The area that opens the context menu. Wrap it around the target you want the context menu to open from when right-clicking (or using the relevant keyboard shortcuts).

PropTypeDefault
asChild
boolean
false
disabled
boolean
false
Data AttributeValue
[data-state]"open" | "closed"

Portal ​

When used, portals the content part into the body.

PropTypeDefault
to
string | HTMLElement
body

Content ​

The component that pops out in an open context menu.

PropTypeDefault
loop
boolean
false
forceMount
boolean
alignOffset
number
0
avoidCollisions
boolean
true
collisionBoundary
Boundary
[]
collisionPadding
number | Padding
0
sticky
enum
"partial"
hideWhenDetached
boolean
false
asChild
boolean
false
EmitType
@closeAutoFocus
(event: Event) => void
@escapeKeyDown
(event: KeyboardEvent) => void
@pointerDownOutside
(event: PointerDownOutsideEvent) => void
@focusOutside
(event: FocusOutsideEvent) => void
@interactOutside
(event: FocusEvent | MouseEvent | TouchEvent) => void
Data AttributeValue
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-context-menu-content-transform-origin
The transform-origin computed from the content and arrow positions/offsets
--radix-context-menu-content-available-width
The remaining width between the trigger and the boundary edge
--radix-context-menu-content-available-height
The remaining height between the trigger and the boundary edge
--radix-context-menu-trigger-width
The width of the trigger
--radix-context-menu-trigger-height
The height of the trigger

Arrow ​

An optional arrow element to render alongside a submenu. This can be used to help visually link the trigger item with the ContextMenu.Content. Must be rendered inside ContextMenu.Content.

PropTypeDefault
asChild
boolean
false
width
number
10
height
number
5

Item ​

The component that contains the context menu items.

PropTypeDefault
asChild
boolean
false
disabled
boolean
textValue
string
EmitType
@select
(event: Event) => void
Data AttributeValue
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

Group ​

Used to group multiple ContextMenu.Items.

PropTypeDefault
asChild
boolean
false

Label ​

Used to render a label. It won't be focusable using arrow keys.

PropTypeDefault
asChild
boolean
false

CheckboxItem ​

An item that can be controlled and rendered like a checkbox.

PropTypeDefault
asChild
boolean
false
checked
boolean | 'indeterminate'
disabled
boolean
textValue
string
EmitType
@update:checked
(checked: boolean) => void
@select
(event: Event) => void
Data AttributeValue
[data-state]"checked" | "unchecked" | "indeterminate"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

RadioGroup ​

Used to group multiple ContextMenu.RadioItems.

PropTypeDefault
asChild
boolean
false
modelValue
string
EmitType
@update:modelValue
(value: string) => void

RadioItem ​

An item that can be controlled and rendered like a radio.

PropTypeDefault
asChild
boolean
false
value*
string
disabled
boolean
textValue
string
EmitType
@select
(event: Event) => void
Data AttributeValue
[data-state]"checked" | "unchecked" | "indeterminate"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

ItemIndicator ​

Renders when the parent ContextMenu.CheckboxItem or ContextMenu.RadioItem is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

PropTypeDefault
asChild
boolean
false
forceMount
boolean
Data AttributeValue
[data-state]"checked" | "unchecked" | "indeterminate"

Separator ​

Used to visually separate items in the context menu.

PropTypeDefault
asChild
boolean
false

Sub ​

Contains all the parts of a submenu.

PropTypeDefault
defaultOpen
boolean
open
boolean
EmitType
@update:open
(open: boolean) => void

SubTrigger ​

An item that opens a submenu. Must be rendered inside ContextMenu.Sub.

PropTypeDefault
asChild
boolean
false
disabled
boolean
textValue
string
Data AttributeValue
[data-state]"open" | "closed"
[data-highlighted]Present when highlighted
[data-disabled]Present when disabled

SubContent ​

The component that pops out when a submenu is open. Must be rendered inside ContextMenu.Sub.

PropTypeDefault
loop
boolean
false
forceMount
boolean
sideOffset
number
0
alignOffset
number
0
avoidCollisions
boolean
true
collisionBoundary
Boundary
[]
collisionPadding
number | Padding
0
arrowPadding
number
0
sticky
enum
"partial"
hideWhenDetached
boolean
false
asChild
boolean
false
EmitType
@escapeKeyDown
(event: KeyboardEvent) => void
@pointerDownOutside
(event: PointerDownOutsideEvent) => void
@focusOutside
(event: FocusOutsideEvent) => void
@interactOutside
(event: FocusEvent | MouseEvent | TouchEvent) => void
Data AttributeValue
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-context-menu-content-transform-origin
The transform-origin computed from the content and arrow positions/offsets
--radix-context-menu-content-available-width
The remaining width between the trigger and the boundary edge
--radix-context-menu-content-available-height
The remaining height between the trigger and the boundary edge
--radix-context-menu-trigger-width
The width of the trigger
--radix-context-menu-trigger-height
The height of the trigger

Examples ​

With submenus ​

You can create submenus by using ContextMenuSub in combination with its parts.

vue
<script setup lang="ts">
import {
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>Sub menu →</ContextMenuSubTrigger>
          <ContextMenuPortal>
            <ContextMenuSubContent>
              <ContextMenuItem>Sub menu item</ContextMenuItem>
              <ContextMenuItem>Sub menu item</ContextMenuItem>
              <ContextMenuArrow />
            </ContextMenuSubContent>
          </ContextMenuPortal>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem>…</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

With disabled items ​

You can add special styles to disabled items via the data-disabled attribute.

vue
<script setup lang="ts">
import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem class="ContextMenuItem" disabled>
          …
        </ContextMenuItem>
        <ContextMenuItem class="ContextMenuItem">
          …
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>
css
/* styles.css */
.ContextMenuItem[data-disabled] {
  color: gainsboro;
}

With separators ​

Use the Separator part to add a separator between items.

vue
<script setup lang="ts">
import {
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>…</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

With labels ​

Use the Label part to help label a section.

vue
<script setup lang="ts">
import {
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuLabel>Label</ContextMenuLabel>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

With checkbox items ​

Use the CheckboxItem part to add an item that can be checked.

vue
<script setup lang="ts">
import {
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from 'radix-vue'
import { Icon } from '@iconify/vue'

const checked = ref(true)
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem v-model="checked">
          <ContextMenuItemIndicator>
            <Icon icon="radix-icons:check" />
          </ContextMenuItemIndicator>
          Checkbox item
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

With radio items ​

Use the RadioGroup and RadioItem parts to add an item that can be checked amongst others.

vue
<script setup lang="ts">
import {
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuPortal,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from 'radix-vue'
import { Icon } from '@iconify/vue'

const color = ref('blue')
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuRadioGroup v-model="color">
          <ContextMenuRadioItem value="red">
            <ContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ContextMenuItemIndicator>
            Red
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="blue">
            <ContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ContextMenuItemIndicator>
            Blue
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="green">
            <ContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ContextMenuItemIndicator>
            Green
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

With complex items ​

You can add extra decorative elements in the Item parts, such as images.

vue
<script setup lang="ts">
import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>
          <img src="…">
          Adolfo Hess
        </ContextMenuItem>
        <ContextMenuItem>
          <img src="…">
          Miyah Myles
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

Constrain the content/sub-content size ​

You may want to constrain the width of the content (or sub-content) so that it matches the trigger (or sub-trigger) width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as --radix-context-menu-trigger-width and --radix-context-menu-content-available-height to support this. Use them to constrain the content dimensions.

vue
<script setup lang="ts">
import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent class="ContextMenuContent">
        …
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>
css
/* styles.css */
.ContextMenuContent {
  width: var(--radix-context-menu-trigger-width);
  max-height: var(--radix-context-menu-content-available-height);
}

Origin-aware animations ​

We expose a CSS custom property --radix-context-menu-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

vue
<script setup lang="ts">
import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent class="ContextMenuContent">
        …
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>
css
/* styles.css */
.ContextMenuContent {
  transform-origin: var(--radix-context-menu-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Collision-aware animations ​

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

vue
<script setup lang="ts">
import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent class="ContextMenuContent">
        …
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>
css
/* styles.css */
.ContextMenuContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.ContextMenuContent[data-side="top"] {
  animation-name: slideUp;
}
.ContextMenuContent[data-side="bottom"] {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Accessibility ​

Uses roving tabindex to manage focus movement among menu items.

Keyboard Interactions ​

KeyDescription
Space
Activates the focused item.
Enter
Activates the focused item.
ArrowDown
Moves focus to the next item.
ArrowUp
Moves focus to the previous item.
ArrowRightArrowLeft
When focus is on ContextMenu.SubTrigger, opens or closes the submenu depending on reading direction.
Esc
Closes the context menu