Context Menu

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

Right click here.

<script setup lang="ts">
import {
  AContextMenuContent,
  AContextMenuGroup,
  AContextMenuItem,
  AContextMenuLabel,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuSub,
  AContextMenuSubContent,
  AContextMenuSubTrigger,
  AContextMenuTrigger,
} from 'akar';

const contentClasses = 'rounded-md bg-background flex flex-col min-w-32 ring ring-ring shadow-lg origin-$akar-context-menu-content-transform-origin overflow-hidden animate-in fade-in-80 data-[state=closed]:(animate-out fade-out-0 zoom-out-95) data-[state=open]:(animate-in fade-in-0 zoom-in-95) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2';

const itemClasses = 'group text-sm color-text p-1.5 outline-none flex gap-1.5 w-full select-none transition-colors-280 items-start relative data-[highlighted]:color-text-highlighted data-[state=open]:color-text-highlighted before:(rounded-md content-empty transition-colors-280 inset-px absolute -z-1) data-[disabled]:(opacity-75 cursor-not-allowed) data-[highlighted]:before:bg-background-elevated/50 data-[state=open]:before:bg-background-elevated/50';

const leadingIconClasses = 'shrink-0 color-text-dimmed group-data-[highlighted]:color-text group-data-[state=open]:color-text transition-colors-280 size-5';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger
      as-child
      class="text-sm border border-border-accented rounded-md border-dashed flex w-72 aspect-video items-center justify-center"
    >
      <span> Right click here. </span>
    </AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent
        :class="contentClasses"
        :side-offset="5"
      >
        <div class="flex-1 relative overflow-y-auto scroll-py-1 divide-divide divide-y">
          <AContextMenuGroup class="p-1 isolate">
            <AContextMenuLabel class="text-sm color-text-highlighted font-semibold p-1.5 flex gap-1.5 w-full items-center">
              <span class="align-middle rounded-full bg-background-elevated inline-flex shrink-0 size-5 select-none items-center justify-center">
                <img
                  src="https://github.com/praburangki.png"
                  class="rounded-inherit size-full object-cover"
                >
              </span>

              <span class="text-start flex flex-1 flex-col min-w-0">
                My account
              </span>
            </AContextMenuLabel>
          </AContextMenuGroup>

          <AContextMenuGroup class="p-1 isolate">
            <AContextMenuSub>
              <AContextMenuSubTrigger
                as="button"
                :class="itemClasses"
              >
                <span class="text-start flex flex-1 flex-col min-w-0">
                  <span class="truncate">Appearance</span>
                  <span class="color-text-muted truncate">Change the appearance of the app</span>
                </span>

                <span class="ms-auto inline-flex gap-1.5 items-center"><span class="i-lucide:chevron-right shrink-0 size-5" /></span>
              </AContextMenuSubTrigger>

              <AContextMenuPortal>
                <AContextMenuSubContent :class="contentClasses">
                  <div class="flex-1 relative overflow-y-auto scroll-py-1 divide-divide divide-y">
                    <AContextMenuGroup class="p-1 isolate">
                      <AContextMenuItem as-child>
                        <button :class="itemClasses">
                          <span
                            class="i-lucide:monitor"
                            :class="leadingIconClasses"
                          />
                          <span class="text-start flex flex-1 flex-col min-w-0"><span class="truncate">System</span></span>
                        </button>
                      </AContextMenuItem>

                      <AContextMenuItem as-child>
                        <button :class="itemClasses">
                          <span
                            class="i-lucide:sun"
                            :class="leadingIconClasses"
                          />
                          <span class="text-start flex flex-1 flex-col min-w-0"><span class="truncate">Light</span></span>
                        </button>
                      </AContextMenuItem>

                      <AContextMenuItem as-child>
                        <button :class="itemClasses">
                          <span
                            class="i-lucide:moon"
                            :class="leadingIconClasses"
                          />
                          <span class="text-start flex flex-1 flex-col min-w-0"><span class="truncate">Dark</span></span>
                        </button>
                      </AContextMenuItem>
                    </AContextMenuGroup>
                  </div>
                </AContextMenuSubContent>
              </AContextMenuPortal>
            </AContextMenuSub>
          </AContextMenuGroup>

          <AContextMenuGroup class="p-1 isolate">
            <AContextMenuItem as-child>
              <button :class="itemClasses">
                Show Sidebar
              </button>
            </AContextMenuItem>
            <AContextMenuItem as-child>
              <button :class="itemClasses">
                Show Toolbar
              </button>
            </AContextMenuItem>
            <AContextMenuItem
              as-child
              disabled
            >
              <button :class="itemClasses">
                Collapse Pinned Tabs
              </button>
            </AContextMenuItem>
          </AContextMenuGroup>
        </div>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

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

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import {
  AContextMenuCheckboxItem,
  AContextMenuContent,
  AContextMenuGroup,
  AContextMenuItem,
  AContextMenuItemIndicator,
  AContextMenuLabel,
  AContextMenuPortal,
  AContextMenuRadioGroup,
  AContextMenuRadioItem,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuSub,
  AContextMenuSubContent,
  AContextMenuSubTrigger,
  AContextMenuTrigger,
} from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger />

    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuLabel />
        <AContextMenuItem />

        <AContextMenuGroup>
          <AContextMenuItem />
        </AContextMenuGroup>

        <AContextMenuCheckboxItem>
          <AContextMenuItemIndicator />
        </AContextMenuCheckboxItem>

        <AContextMenuRadioGroup>
          <AContextMenuRadioItem>
            <AContextMenuItemIndicator />
          </AContextMenuRadioItem>
        </AContextMenuRadioGroup>

        <AContextMenuSub>
          <AContextMenuSubTrigger />
          <AContextMenuPortal>
            <AContextMenuSubContent />
          </AContextMenuPortal>
        </AContextMenuSub>

        <AContextMenuSeparator />
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

One benefit of using Akar is its flexibility and low-level control over the components. However, this also means that you may need to manually construct more complex UI elements by combining multiple Akar components together.

If you feel there's a lot of elements that needs to be constructed manually using Akar, consider using Pohon UI instead. It provides a higher-level abstraction over Akar components with pre-defined styles and behaviors that can help you build UIs faster.

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.

Props

Prop	Default	Type
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`modal`	`true`	`boolean` The modality of the dropdown menu. When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
`pressOpenDelay`	`700`	`number` The duration from when the trigger is pressed until the menu opens.

Emits

Event	Type
`update:open`	`[payload: boolean]` Event handler called when the open state of the combobox changes.

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

Props

Prop	Default	Type
`as`	`'span'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`	`false`	`boolean` When `true`, the context menu would not open when right-clicking. Note that this will also restore the native context menu.

Data Attributes

Attribute	Value
`[data-state]`	`'open' \| 'closed'`

Portal

When used, portals the content part into the body.

Props

Prop	Default	Type
`defer`		`boolean` Defer the resolving of a Teleport target until other parts of the application have mounted (requires Vue 3.5.0+) {@link https://vuejs.org/guide/built-ins/teleport.html#deferred-teleport}
`disabled`		`boolean` When `true`, the context menu would not open when right-clicking. Note that this will also restore the native context menu.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`to`		`string \| HTMLElement` Vue native teleport component prop `:to` {@link https://vuejs.org/guide/built-ins/teleport.html#basic-usage}

Content

The component that pops out in an open context menu.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`alignFlip`		`boolean` Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
`alignOffset`	`0`	`number` An offset in pixels from the `start` or `end` alignment options.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`avoidCollisions`	`true`	`boolean` When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
`collisionBoundary`	`[]`	`Element \| (Element \| null)[] \| null` The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
`collisionPadding`	`0`	`number \| Partial<Record<Side, number>>` The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
`disableUpdateOnLayoutShift`		`boolean` Whether to disable the update position for the content when the layout shifted.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`hideWhenDetached`	`false`	`boolean` Whether to hide the content when the trigger becomes fully occluded.
`loop`		`boolean` When `true`, keyboard navigation will loop from last item to first, and vice versa.
`positionStrategy`		`'fixed' \| 'absolute'` The type of CSS position property to use.
`prioritizePosition`		`boolean` Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
`reference`		`ReferenceElement` The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
`sideFlip`		`boolean` Flip to the opposite side when colliding with boundary.
`sticky`	`'partial'`	`'always' \| 'partial'` 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.

Emits

Event	Type
`closeAutoFocus`	`[event: Event]`
`escapeKeyDown`	`[event: KeyboardEvent]`
`focusOutside`	`[event: FocusOutsideEvent]`
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]`
`pointerDownOutside`	`[event: PointerDownOutsideEvent]`

Data Attributes

Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-side]`	`'left' \| 'right' \| 'bottom' \| 'top'`
`[data-align]`	`'start' \| 'end' \| 'center'`

CSS Variables

Variable	Description
`--akar-context-menu-content-transform-origin`
`--akar-context-menu-content-available-width`
`--akar-context-menu-content-available-height`
`--akar-context-menu-trigger-width`
`--akar-context-menu-trigger-height`

Arrow

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

Props

Prop	Default	Type
`as`	`'svg'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`height`	`5`	`number` The height of the arrow in pixels.
`rounded`		`boolean` When `true`, render the rounded version of arrow. Do not work with `as`/`asChild`
`width`	`10`	`number` The width of the arrow in pixels.

Item

The component that contains the context menu items.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, the context menu would not open when right-clicking. Note that this will also restore the native context menu.
`textValue`		`string` Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item. Use this when the content is complex, or you have non-textual content inside.

Emits

Event	Type
`select`	`[event: Event]`

Data Attributes

Attribute	Value
`[data-highlighted]`	Present when highlighted
`[data-disabled]`	Present when disabled

Group

Used to group multiple AContextMenu.Items.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Label

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

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

CheckboxItem

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

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, the context menu would not open when right-clicking. Note that this will also restore the native context menu.
`modelValue`		`false \| true \| 'indeterminate'` The controlled checked state of the item. Can be used as `v-model`.
`textValue`		`string` Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item. Use this when the content is complex, or you have non-textual content inside.

Emits

Event	Type
`select`	`[event: Event]`
`update:modelValue`	`[payload: boolean]` Event handler called when the value changes.

Data Attributes

Attribute	Value
`[data-state]`	`'checked' \| 'unchecked' \| 'indeterminate'`
`[data-highlighted]`	Present when highlighted
`[data-disabled]`	Present when disabled

RadioGroup

Used to group multiple AContextMenu.RadioItems.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`modelValue`		`string` The controlled checked state of the item. Can be used as `v-model`.

Emits

Event	Type
`update:modelValue`	`[payload: string]` Event handler called when the value changes.

RadioItem

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

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, the context menu would not open when right-clicking. Note that this will also restore the native context menu.
`textValue`		`string` Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item. Use this when the content is complex, or you have non-textual content inside.
`value*`		`string` The unique value of the item.

Emits

Event	Type
`select`	`[event: Event]`

Data Attributes

Attribute	Value
`[data-state]`	`'checked' \| 'unchecked' \| 'indeterminate'`
`[data-highlighted]`	Present when highlighted
`[data-disabled]`	Present when disabled

ItemIndicator

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

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Data Attributes

Attribute	Value
`[data-state]`	`'checked' \| 'unchecked' \| 'indeterminate'`

Separator

Used to visually separate items in the context menu.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Sub

Contains all the parts of a submenu.

Props

Prop	Default	Type
`defaultOpen`		`boolean` The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean`

Emits

Event	Type
`update:open`	`[payload: boolean]` Event handler called when the open state of the combobox changes.

Slots

Slot	Type
`open`	`boolean` The controlled open state of the menu. Can be used as `v-model:open`.

SubTrigger

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

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, the context menu would not open when right-clicking. Note that this will also restore the native context menu.
`textValue`		`string` Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item. Use this when the content is complex, or you have non-textual content inside.

Data Attributes

Attribute	Value
`[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 AContextMenu.Sub.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`alignFlip`		`boolean` Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
`alignOffset`		`number` An offset in pixels from the `start` or `end` alignment options.
`arrowPadding`		`number` The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`avoidCollisions`		`boolean` When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
`collisionBoundary`		`Element \| (Element \| null)[] \| null` The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
`collisionPadding`		`number \| Partial<Record<Side, number>>` The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
`disableUpdateOnLayoutShift`		`boolean` Whether to disable the update position for the content when the layout shifted.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`hideWhenDetached`		`boolean` Whether to hide the content when the trigger becomes fully occluded.
`loop`		`boolean` When `true`, keyboard navigation will loop from last item to first, and vice versa.
`positionStrategy`		`'fixed' \| 'absolute'` The type of CSS position property to use.
`prioritizePosition`		`boolean` Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
`reference`		`ReferenceElement` The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
`sideFlip`		`boolean` Flip to the opposite side when colliding with boundary.
`sideOffset`		`number` The distance in pixels from the trigger.
`sticky`		`'always' \| 'partial'` 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.
`updatePositionStrategy`		`'always' \| 'optimized'` Strategy to update the position of the floating element on every animation frame.

Emits

Event	Type
`closeAutoFocus`	`[event: Event]`
`entryFocus`	`[event: Event]`
`escapeKeyDown`	`[event: KeyboardEvent]`
`focusOutside`	`[event: FocusOutsideEvent]`
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]`
`openAutoFocus`	`[event: Event]`
`pointerDownOutside`	`[event: PointerDownOutsideEvent]`

Data Attributes

Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-side]`	`'left' \| 'right' \| 'bottom' \| 'top'`
`[data-align]`	`'start' \| 'end' \| 'center'`

CSS Variables

Variable	Description
`--akar-context-menu-content-transform-origin`	The `transform-origin` computed from the content and arrow positions/offsets
`--akar-context-menu-content-available-width`	The remaining width between the trigger and the boundary edge
`--akar-context-menu-content-available-height`	The remaining height between the trigger and the boundary edge
`--akar-context-menu-trigger-width`	The width of the trigger
`--akar-context-menu-trigger-height`	The height of the trigger

Examples

With submenus

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

<script setup lang="ts">
import {
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuSub,
  AContextMenuSubContent,
  AContextMenuSubTrigger,
  AContextMenuTrigger,
} from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuSeparator />
        <AContextMenuSub>
          <AContextMenuSubTrigger>Sub menu →</AContextMenuSubTrigger>
          <AContextMenuPortal>
            <AContextMenuSubContent>
              <AContextMenuItem>Sub menu item</AContextMenuItem>
              <AContextMenuItem>Sub menu item</AContextMenuItem>
              <AContextMenuArrow />
            </AContextMenuSubContent>
          </AContextMenuPortal>
        </AContextMenuSub>
        <AContextMenuSeparator />
        <AContextMenuItem>…</AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

With disabled items

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

<script setup lang="ts">
import { AContextMenuContent, AContextMenuItem, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem
          class="AContextMenuItem"
          disabled
        >
          …
        </AContextMenuItem>
        <AContextMenuItem class="AContextMenuItem">
          …
        </AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

/* styles.css */
.AContextMenuItem[data-disabled] {
  color: gainsboro;
}

With separators

Use the Separator part to add a separator between items.

<script setup lang="ts">
import {
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuTrigger,
} from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuSeparator />
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuSeparator />
        <AContextMenuItem>…</AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

With labels

Use the Label part to help label a section.

<script setup lang="ts">
import {
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuLabel,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuTrigger,
} from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuLabel>Label</AContextMenuLabel>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuItem>…</AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

With checkbox items

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

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  AContextMenuCheckboxItem,
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuItemIndicator,
  AContextMenuPortal,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuTrigger,
} from 'akar';

const checked = ref(true);
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuItem>…</AContextMenuItem>
        <AContextMenuSeparator />
        <AContextMenuCheckboxItem v-model="checked">
          <AContextMenuItemIndicator>
            <Icon icon="radix-icons:check" />
          </AContextMenuItemIndicator>
          Checkbox item
        </AContextMenuCheckboxItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

With radio items

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

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import {
  AContextMenuCheckboxItem,
  AContextMenuContent,
  AContextMenuItem,
  AContextMenuItemIndicator,
  AContextMenuPortal,
  AContextMenuRadioGroup,
  AContextMenuRadioItem,
  AContextMenuRoot,
  AContextMenuSeparator,
  AContextMenuTrigger,
} from 'akar';

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

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuRadioGroup v-model="color">
          <AContextMenuRadioItem value="red">
            <AContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </AContextMenuItemIndicator>
            Red
          </AContextMenuRadioItem>
          <AContextMenuRadioItem value="blue">
            <AContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </AContextMenuItemIndicator>
            Blue
          </AContextMenuRadioItem>
          <AContextMenuRadioItem value="green">
            <AContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </AContextMenuItemIndicator>
            Green
          </AContextMenuRadioItem>
        </AContextMenuRadioGroup>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

With complex items

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

<script setup lang="ts">
import { AContextMenuContent, AContextMenuItem, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent>
        <AContextMenuItem>
          <img src="…">
          Adolfo Hess
        </AContextMenuItem>
        <AContextMenuItem>
          <img src="…">
          Miyah Myles
        </AContextMenuItem>
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</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 --akar-context-menu-trigger-width and --akar-context-menu-content-available-height to support this. Use them to constrain the content dimensions.

<script setup lang="ts">
import { AContextMenuContent, AContextMenuItem, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent class="AContextMenuContent">
        …
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

/* styles.css */
.AContextMenuContent {
  width: var(--akar-context-menu-trigger-width);
  max-height: var(--akar-context-menu-content-available-height);
}

Origin-aware animations

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

<script setup lang="ts">
import { AContextMenuContent, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent class="AContextMenuContent">
        …
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

/* styles.css */
.AContextMenuContent {
  transform-origin: var(--akar-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.

<script setup lang="ts">
import { AContextMenuContent, AContextMenuPortal, AContextMenuRoot, AContextMenuTrigger } from 'akar';
</script>

<template>
  <AContextMenuRoot>
    <AContextMenuTrigger>…</AContextMenuTrigger>
    <AContextMenuPortal>
      <AContextMenuContent class="AContextMenuContent">
        …
      </AContextMenuContent>
    </AContextMenuPortal>
  </AContextMenuRoot>
</template>

/* styles.css */
.AContextMenuContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.AContextMenuContent[data-side='top'] {
  animation-name: slideUp;
}
.AContextMenuContent[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

Key	Description
`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 `AContextMenu.SubTrigger`, opens or closes the submenu depending on reading direction.
`Esc`	Closes the context menu

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.