README

A right-click context menu component for Laravel applications. Custom menus on any element. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/context-menu

Livewire Usage

Basic Usage

<livewire:sb-context-menu>
    <x-slot name="trigger">
        <div class="p-4 border rounded">Right-click here</div>
    </x-slot>

    <button class="block w-full px-4 py-2 text-left hover:bg-gray-100">Edit</button>
    <button class="block w-full px-4 py-2 text-left hover:bg-gray-100">Delete</button>
</livewire:sb-context-menu>

With Dividers

<livewire:sb-context-menu>
    <x-slot name="trigger">
        <div>Right-click for options</div>
    </x-slot>

    <button>Cut</button>
    <button>Copy</button>
    <button>Paste</button>
    <hr class="my-1">
    <button>Delete</button>
</livewire:sb-context-menu>

Livewire Props

Vue 3 Usage

Setup

import { SbContextMenu, SbContextMenuItem } from './vendor/sb-context-menu';
app.component('SbContextMenu', SbContextMenu);
app.component('SbContextMenuItem', SbContextMenuItem);

Basic Usage

<template>
  <SbContextMenu>
    <template #trigger>
      <div class="p-8 border-2 border-dashed rounded-lg text-center">
        Right-click anywhere in this area
      </div>
    </template>

    <SbContextMenuItem @click="handleEdit">Edit</SbContextMenuItem>
    <SbContextMenuItem @click="handleDuplicate">Duplicate</SbContextMenuItem>
    <SbContextMenuItem @click="handleDelete" variant="danger">
      Delete
    </SbContextMenuItem>
  </SbContextMenu>
</template>

<script setup>
const handleEdit = () => console.log('Edit');
const handleDuplicate = () => console.log('Duplicate');
const handleDelete = () => console.log('Delete');
</script>

With Icons

<template>
  <SbContextMenu>
    <template #trigger>
      <div class="p-4 bg-gray-100 rounded">Right-click me</div>
    </template>

    <SbContextMenuItem icon="pencil">Edit</SbContextMenuItem>
    <SbContextMenuItem icon="copy">Duplicate</SbContextMenuItem>
    <SbContextMenuItem icon="download">Download</SbContextMenuItem>
    <hr class="my-1" />
    <SbContextMenuItem icon="trash" variant="danger">Delete</SbContextMenuItem>
  </SbContextMenu>
</template>

File Browser Example

<template>
  <div class="grid grid-cols-4 gap-4">
    <SbContextMenu v-for="file in files" :key="file.id">
      <template #trigger>
        <div class="p-4 border rounded text-center cursor-pointer hover:bg-gray-50">
          <FileIcon :type="file.type" />
          <p class="mt-2 text-sm truncate">{{ file.name }}</p>
        </div>
      </template>

      <SbContextMenuItem @click="open(file)">Open</SbContextMenuItem>
      <SbContextMenuItem @click="rename(file)">Rename</SbContextMenuItem>
      <SbContextMenuItem @click="download(file)">Download</SbContextMenuItem>
      <hr class="my-1" />
      <SbContextMenuItem @click="deleteFile(file)" variant="danger">
        Delete
      </SbContextMenuItem>
    </SbContextMenu>
  </div>
</template>

With Submenus

<template>
  <SbContextMenu>
    <template #trigger>
      <div>Right-click</div>
    </template>

    <SbContextMenuItem>View</SbContextMenuItem>
    <SbContextMenuItem submenu>
      Sort by
      <template #submenu>
        <SbContextMenuItem @click="sort('name')">Name</SbContextMenuItem>
        <SbContextMenuItem @click="sort('date')">Date</SbContextMenuItem>
        <SbContextMenuItem @click="sort('size')">Size</SbContextMenuItem>
      </template>
    </SbContextMenuItem>
    <SbContextMenuItem>Refresh</SbContextMenuItem>
  </SbContextMenu>
</template>

Vue Props (SbContextMenu)

Vue Props (SbContextMenuItem)

Slots

Features

• Right-click Trigger: Native context menu behavior
• Positioning: Auto-positions near cursor
• Submenus: Nested menu support
• Icons: Optional item icons
• Variants: Default and danger styles
• Click Outside: Closes on outside click

Styling

Uses Tailwind CSS:

• White background with shadow
• Hover highlights
• Red text for danger variant
• Smooth animations

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License