vp-pie-menu

A radial context menu web component

Long-press and drag to select — or click to open

    •
    scroll ↓

    Playground

    Configure it live

    Adjust the radius, accent color, and item count. The component updates in real time.

    •
    Radius
    105
    Accent
    Items

    Use Cases

    Three configurations

    The same component adapts to different interaction contexts: file management, media playback, and navigation.

    File Actions

    •

    Media Controls

    •

    Quick Nav

    •

    OVERDRIVE

    Maximum velocity

    Particle physics, SVG displacement filters, and spatial choreography. Click to activate.

    •

    API

    Reference

    Attributes, events, and CSS custom properties for theming.

    Attributes

    NameDefaultDescription
    radius105Distance from center to items in pixels

    Events

    NameDetail
    vp-pie-select { action, icon, ...dataAttrs, element }
    Bubbles. Passes through all data-* attributes from the source button.

    CSS Custom Properties

    PropertyDefaultPurpose
    --vp-accent#f97316Primary accent color (stems, center, selection flash)
    --vp-accent-rgb249, 115, 22Accent as RGB triplet for rgba() usage
    --vp-overlay-bgrgba(12,10,9,0.8)Overlay backdrop color
    --vp-panel-bgrgba(28,25,23,0.95)Item panel background
    --vp-panel-borderrgba(68,64,60,0.6)Item panel border
    --vp-text#fafaf9Item text color
    --vp-stem-colorrgba(accent, 0.45)Stem line rest state
    --vp-stem-active-colorrgba(accent, 0.85)Stem line when item is focused/hovered

    Light DOM Structure

    <vp-pie-menu radius="105"> <button>Trigger</button> <menu class="vp-pie-menu-items"> <li><button data-action="Edit" data-icon="edit">Edit</button></li> <li><button data-action="Delete" data-icon="delete">Delete</button></li> </menu> </vp-pie-menu>

    Code

    Usage examples

    Three patterns: basic usage, event handling, and theming.

    Basic usage 
    <vp-pie-menu radius="105">
  <button>Open menu</button>
  <menu class="vp-pie-menu-items">
    <li><button data-action="Edit" data-icon="edit">Edit</button></li>
    <li><button data-action="Share" data-icon="share">Share</button></li>
  </menu>
</vp-pie-menu>
    Event handling 
    // Listen for selections
document.querySelector('vp-pie-menu')
  .addEventListener('vp-pie-select', (e) => {
    console.log(e.detail.action);  // "Edit"
    console.log(e.detail.icon);    // "edit"
    // All data-* attrs pass through:
    // e.detail.dataId, e.detail.dataUrl, etc.
  });
    Theming 
    /* Override accent and colors via CSS custom properties */
vp-pie-menu {
  --vp-accent: #3b82f6;
  --vp-accent-rgb: 59, 130, 246;
  --vp-panel-bg: rgba(15, 23, 42, 0.95);
  --vp-panel-border: rgba(59, 130, 246, 0.4);
  --vp-text: #f1f5f9;
}