Components

Context menu

Displays a compact contextual action menu on right click, with support for nested menus, divider items, and keyboard shortcut keycaps.

Component

View code

Show playground

Right click here

Props

Props	Default	Type
`items`	—	`ContextMenuItem[]`
`hasShadow`	`true`	`boolean`
`hasBorder`	`true`	`boolean`
`width`	`240`	`number`
`disabled`	`false`	`boolean`
`prefetchOn`	`PrefetchOn.VISIBILITY`	`PrefetchOnStrategy`
`positionXOffset`	`0`	`number`
`positionYOffset`	`0`	`number`
`shouldTeleport`	`true`	`boolean`
`nestedMenuGap`	`8`	`number`
`zIndex`	`'50'`	`string`

Slots

Name	Description
`default`	Target content that will open the menu on right click.
`items`	Optional custom content using compact DropdownMenuContextItem entries.

Usage

items

Sets the contextual items rendered by the menu. Divider entries render a separator, while kbd renders one or more keyboard keycaps.

 <template>
    <ContextMenu
        :items="items"
        :width="240"
    >
        <ContentPlaceholder text="Right click here" />
    </ContextMenu>
</template>

<script setup lang="ts">
const items = ref<ContextMenuItem[]>([
    {
        text: 'Open',
        icon: 'mdi:file-document-outline',
        kbd: ['Ctrl', 'O'],
    },
    {
        text: 'Rename',
        icon: 'mdi:pencil-outline',
        kbd: 'F2',
    },
    {
        divider: true,
    },
    {
        text: 'Move to',
        icon: 'mdi:folder-outline',
        children: [
            { text: 'Archive' },
            { text: 'Shared' },
            { divider: true },
            {
                text: 'Favorites',
                kbd: ['Ctrl', 'Shift', 'M'],
            },
        ],
    },
])
</script>

width

Sets a fixed menu width in pixels.

 <template>
    <ContextMenu
        :items="items"
        :width="280"
    >
        <ContentPlaceholder text="Right click here" />
    </ContextMenu>
</template>

Type: number
Default: 240

TypeScript interface

 interface ContextMenuItem extends DropdownMenuItem {
    divider?: boolean
    kbd?: string | string[]
    children?: ContextMenuItem[]
}

disabled

Disables context-menu opening in the target area.

 <template>
    <ContextMenu
        :items="items"
        :disabled="true"
    >
        <ContentPlaceholder text="Right click here" />
    </ContextMenu>
</template>

Type: boolean
Default: false

shouldTeleport

Controls whether the menu is rendered through <teleport>.

 <template>
    <ContextMenu
        :items="items"
        :shouldTeleport="true"
    >
        <ContentPlaceholder text="Right click here" />
    </ContextMenu>
</template>

Type: boolean
Default: true

positionXOffset

Applies a horizontal offset from the click coordinates.

 <template>
    <ContextMenu
        :items="items"
        :positionXOffset="8"
    >
        <ContentPlaceholder text="Right click here" />
    </ContextMenu>
</template>

Type: number
Default: 0

positionYOffset

Applies a vertical offset from the click coordinates.

 <template>
    <ContextMenu
        :items="items"
        :positionYOffset="8"
    >
        <ContentPlaceholder text="Right click here" />
    </ContextMenu>
</template>

Type: number
Default: 0

nestedMenuGap

Sets the horizontal spacing between nested context menu levels.

 <template>
    <ContextMenu
        :items="items"
        :nestedMenuGap="12"
    >
        <ContentPlaceholder text="Right click here" />
    </ContextMenu>
</template>

Type: number
Default: 8

prefetchOn

Controls link prefetch behavior for context items with actionType: LINK.

 <template>
    <ContextMenu
        :items="items"
        :prefetchOn="PrefetchOn.INTERACTION"
    >
        <ContentPlaceholder text="Right click here" />
    </ContextMenu>
</template>

Type: PrefetchOnStrategy
Default: PrefetchOn.VISIBILITY

Options

Value	Description
`VISIBILITY`	Prefetch when links become visible.
`INTERACTION`	Prefetch when links are interacted with.