ContextMenu

Menu on right click

Right-click commands for an area — a file in a list, a canvas. Everything in it must also be reachable another way (a toolbar, a ⋯ button): touch screens and many keyboard users never open a context menu.

Basic

right-click, or focus and press Shift+F10

Heroine

＋New project⌘N

Open…⌘O

Locked

Show grid

Snap

Small

Large

Share›

Delete⌫

<script setup lang="ts">
import { ref } from "vue";
import { BlessContextMenu } from "blessing-ui";
import { menu } from "./_menu";
const last = ref("");
</script>

<template>
  <BlessContextMenu :items="menu" @select="last = 'label' in $event ? $event.label : ''">
    <!-- focusable, so the Menu key and Shift+F10 open it too -->
    <div
      tabindex="0"
      aria-label="Episode 3 script"
      style="
        display: grid;
        place-items: center;
        height: 120px;
        max-width: 480px;
        border: 1px dashed var(--bless-color-text-muted);
      "
    >
      right-click, or focus and press Shift+F10 {{ last && `· ${last}` }}
    </div>
  </BlessContextMenu>
</template>

• It opens where you right-click, or at the focused element when opened with the Menu key or Shift+F10.
• The menu itself is a DropdownMenu: arrows, typeahead, checkbox and radio items, submenus.

Usage

import { BlessContextMenu } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	BlessMenuItem[]	—
checked	Record<string, boolean>	—
radios	Record<string, string>	—

Events

Name	Payload	Description
select	[item: BlessMenuItem]

Slots

Name	Scope	Description
default	—