Context Menu
Use the KContextMenu component to display a custom context menu when the user right-clicks an element.
Basic Usage
Right-click anywhere in this box
TypeScript
.context-area
span Right-click anywhere in this box
KContextMenu
template(#default="{ close }")
KGrid(direction="column" noGap)
a.menu-link(href="#" @click.prevent="close")
KIcon(iconname="file")
| Edit
a.menu-link(href="#" @click.prevent="close")
KIcon(iconname="file")
| Duplicate
a.menu-link.text-danger(href="#" @click.prevent="close")
KIcon(iconname="close")
| Delete
Tree Node Context Menu
Root Folder
TypeScript
KTree(:dataProvider="treeProvider" labelField="name")
template(#item="{ data }")
.tree-node
KIcon(v-if="data.type === 'folder'" iconname="folder")
KIcon(v-else-if="data.type === 'file'" iconname="file")
span {{ data.name }}
KContextMenu
template(#default="{ close }")
KGrid(direction="column" noGap)
a.menu-link(href="#" @click.prevent="close")
KIcon(iconname="file")
| Rename "{{ data.name }}"
a.menu-link.text-danger(href="#" @click.prevent="close")
KIcon(iconname="close")
| Delete
script(lang="ts" setup).
import { CTreeClientDataProvider } from '@katlux/providers'
const treeProvider = new CTreeClientDataProvider({ idKey: 'id', parentKey: 'parentId' })
treeProvider.setData([
{ id: 1, parentId: null, name: 'Root Folder', type: 'folder' },
{ id: 2, parentId: 1, name: 'Documents', type: 'folder' },
{ id: 3, parentId: 2, name: 'Report.pdf', type: 'file' },
])
Attributes
Configure the KContextMenu component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| v-model:isOpen | Boolean | false | Controls the visibility of the context menu (can be used for manual control). |
| x | Number | undefined | The manual horizontal coordinate (clientX) where the menu should open. |
| y | Number | undefined | The manual vertical coordinate (clientY) where the menu should open. |
| target | String | HTMLElement | undefined | CSS Selector or HTMLElement to attach the contextmenu event listener to. If omitted and coordinates are not set, defaults to the parent element. |
| teleportTo | String | undefined | Specifies a target element to teleport the menu into (e.g. '#app' or 'body'). If omitted, defaults to the current modal portal if inside a KModal, otherwise 'body'. |
Slots
Slots available for custom content templates.
| Name | Props | Description |
|---|---|---|
| default | { close: () => void } | Content of the context menu. Exposes a close function to hide the menu when clicked. |