Laravel Context Menu Component

Free · MIT

A right-click context menu with viewport-aware positioning, powered by Alpine.js.

A Context Menu built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::context-menu>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::context-menu>
    <div class="p-8 border border-dashed rounded-lg text-center text-sm text-gray-500">
        Right-click anywhere in this area
    </div>

    <x-slot:menu>
        <x-aura::dropdown.item icon="copy">Copy</x-aura::dropdown.item>
        <x-aura::dropdown.item icon="clipboard">Paste</x-aura::dropdown.item>
        <x-aura::dropdown.separator />
        <x-aura::dropdown.item icon="trash" variant="danger">Delete</x-aura::dropdown.item>
    </x-slot:menu>
</x-aura::context-menu>

See the full API, props and live examples in the Context Menu documentation.

Overview

The <x-aura::context-menu> component renders a custom right-click menu on any element. When the user right-clicks within the component's area, a floating menu appears at the cursor position. The menu is viewport-aware, flipping its position when it would overflow the screen edges. It closes on outside click or Escape key.

Use context menu for: