Skip to main content
Browse docs

Marwes documentation

ContextMenu

Compact action-list component with a menu shell, button-backed items, icon slots, dividers, disabled state, and destructive action styling.

What this family solves

Compact action-list component with a menu shell, button-backed items, icon slots, dividers, disabled state, and destructive action styling.

Use when

  • The UI needs a compact grouped list of secondary actions.
  • Actions benefit from leading icons and a small menu surface.
  • The product already owns the trigger, popover positioning, and menu visibility state.

Avoid when

  • The UI needs a full popover primitive with collision-aware positioning.
  • The choices are form values rather than commands; use a select or dropdown field instead.
  • The menu would contain complex forms or long-form content rather than short actions.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

ContextMenu

Types

ContextMenuActionItem, ContextMenuDividerItem, ContextMenuEntry, ContextMenuProps

Vue — @marwes-ui/vue

Component

ContextMenu

Types

ContextMenuActionItem, ContextMenuDividerItem, ContextMenuEntry, ContextMenuProps

Svelte — @marwes-ui/svelte

Component

ContextMenu

Types

ContextMenuActionItem, ContextMenuEntry, ContextMenuProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { ContextMenu, IconName } from "@marwes-ui/react"

export function Example() {
  return (
    <ContextMenu
      ariaLabel="File actions"
      items={[
        { value: "edit", label: "Edit", icon: IconName.Edit },
        { value: "preview", label: "Preview", icon: IconName.Eye },
        { value: "download", label: "Download", icon: IconName.Download },
        { kind: "divider" },
        { value: "bookmark", label: "Bookmark", icon: IconName.Bookmark },
        { value: "report", label: "Report", icon: IconName.Flag },
        { kind: "divider" },
        { value: "delete", label: "Delete", icon: IconName.Trash, destructive: true },
      ]}
    />
  )
}

Vue

<script setup lang="ts">
import { ContextMenu, IconName } from "@marwes-ui/vue"
</script>

<template>
  <ContextMenu
    aria-label="File actions"
    :items="[
      { value: 'edit', label: 'Edit', icon: IconName.Edit },
      { value: 'preview', label: 'Preview', icon: IconName.Eye },
      { value: 'download', label: 'Download', icon: IconName.Download },
      { kind: 'divider' },
      { value: 'bookmark', label: 'Bookmark', icon: IconName.Bookmark },
      { value: 'report', label: 'Report', icon: IconName.Flag },
      { kind: 'divider' },
      { value: 'delete', label: 'Delete', icon: IconName.Trash, destructive: true },
    ]"
  />
</template>

Svelte

<script lang="ts">
  import { ContextMenu, IconName } from "@marwes-ui/svelte"
</script>

<ContextMenu
  ariaLabel="File actions"
  items={[
    { value: "edit", label: "Edit", icon: IconName.Edit },
    { value: "preview", label: "Preview", icon: IconName.Eye },
    { value: "download", label: "Download", icon: IconName.Download },
    { kind: "divider" },
    { value: "bookmark", label: "Bookmark", icon: IconName.Bookmark },
    { value: "report", label: "Report", icon: IconName.Flag },
    { kind: "divider" },
    { value: "delete", label: "Delete", icon: IconName.Trash, destructive: true },
  ]}
/>

Accessibility requirements

  • Consumer-composed interaction: Compose real focus management, outside-click dismissal, and positioning around this primitive.
  • Destructive action distinction: Give every destructive action an explicit visual and semantic distinction from safe actions.
  • Focus and escape review: Test focus entry, focus return, dismissal, and escape-key behavior in context.
  • Manual review boundary: End-to-end product composition where a trigger opens the menu and returns focus after close.
  • Manual review 2: Keyboard behavior for any future managed popover/menu-button composition.
  • Manual review 3: Visual review against the light and dark Figma context-menu frames.

Theming

Context Menu uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources