Tailwind CSS Context Menu

Use the context menu component to show a menu of actions on right click or long press, like on a file, a table row, or a canvas. For a menu that opens from a button, use the dropdown menu.

<div
  id="cm-demo-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu w-48" data-sp-toggle="#cm-demo-area">
  <button class="context-menu-item">
    Back
    <span class="context-menu-shortcut">⌘[</span>
  </button>
  <button class="context-menu-item" aria-disabled="true">
    Forward
    <span class="context-menu-shortcut">⌘]</span>
  </button>
  <button class="context-menu-item">
    Reload
    <span class="context-menu-shortcut">⌘R</span>
  </button>
  <button id="cm-demo-more" class="context-menu-item">
    More Tools
    <svg class="ml-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </button>
  <div class="context-menu-separator"></div>
  <label class="context-menu-item context-menu-item-checkbox">
    <input type="checkbox" checked />
    Show Bookmarks
  </label>
  <label class="context-menu-item context-menu-item-checkbox">
    <input type="checkbox" />
    Show Full URLs
  </label>
  <div class="context-menu-separator"></div>
  <div class="context-menu-label">People</div>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-demo-people" value="pedro" checked />
    Pedro Duarte
  </label>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-demo-people" value="colm" />
    Colm Tuite
  </label>
</div>
 
<div class="context-menu context-menu-sub w-44" data-sp-toggle="#cm-demo-more" data-sp-mode="hover" data-sp-placement="inline-end-start">
  <button class="context-menu-item">Save Page...</button>
  <button class="context-menu-item">Create Shortcut...</button>
  <button class="context-menu-item">Name Window...</button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item">Developer Tools</button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item context-menu-item-destructive">Delete</button>
</div>

Usage

Add the context-menu class to the menu panel and point it at the area it belongs to with data-sp-toggle. Give the area an id and the context-menu-trigger class. Fill the menu with context-menu-item buttons, and pick whichever other parts it needs: labels, separators, shortcuts, checkable items, a submenu.

Class	Description
`context-menu`	Add to the menu panel, which carries the `data-sp-*` options
`context-menu-sub`	Add to a nested `context-menu` that opens from an item
`context-menu-trigger`	Add to the area that opens the menu
`context-menu-item`	Add to each action, on a native `<button>` or `<a>`
`context-menu-item-destructive`	Add to `context-menu-item` for a destructive action
`context-menu-item-checkbox`	Add to `context-menu-item` wrapping a hidden `<input type="checkbox">` that holds the state
`context-menu-item-radio`	Add to `context-menu-item` wrapping a hidden `<input type="radio">` with a shared `name`
`context-menu-label`	Add to a heading above a group of items
`context-menu-separator`	Add to an element between items to divide them
`context-menu-shortcut`	Add to a `<span>` inside an item for a keyboard hint

<div id="my-area" class="context-menu-trigger">Right click here</div>
 
<div class="context-menu" data-sp-toggle="#my-area">
  <button class="context-menu-item">Back</button>
  <button class="context-menu-item">Forward</button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item">Reload</button>
</div>

Examples

A plain menu of actions.

<div
  id="cm-basic-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu" data-sp-toggle="#cm-basic-area">
  <button class="context-menu-item">Back</button>
  <button class="context-menu-item" aria-disabled="true">Forward</button>
  <button class="context-menu-item">Reload</button>
</div>

Nest menus by pointing a second context menu at an item and adding context-menu-sub. Hover mode opens it when the pointer reaches the item.

<div
  id="cm-sub-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu" data-sp-toggle="#cm-sub-area">
  <button class="context-menu-item">
    Copy
    <span class="context-menu-shortcut">⌘C</span>
  </button>
  <button class="context-menu-item">
    Cut
    <span class="context-menu-shortcut">⌘X</span>
  </button>
  <button id="cm-sub-more" class="context-menu-item">
    More Tools
    <svg class="ml-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </button>
</div>
 
<div class="context-menu context-menu-sub" data-sp-toggle="#cm-sub-more" data-sp-mode="hover" data-sp-placement="inline-end-start">
  <button class="context-menu-item">Save Page...</button>
  <button class="context-menu-item">Create Shortcut...</button>
  <button class="context-menu-item">Name Window...</button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item">Developer Tools</button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item context-menu-item-destructive">Delete</button>
</div>

Keyboard shortcuts

Hint an item's keyboard shortcut with a context-menu-shortcut at its end.

<div
  id="cm-shortcuts-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu" data-sp-toggle="#cm-shortcuts-area">
  <button class="context-menu-item">
    Back
    <span class="context-menu-shortcut">⌘[</span>
  </button>
  <button class="context-menu-item" aria-disabled="true">
    Forward
    <span class="context-menu-shortcut">⌘]</span>
  </button>
  <button class="context-menu-item">
    Reload
    <span class="context-menu-shortcut">⌘R</span>
  </button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item">
    Save
    <span class="context-menu-shortcut">⌘S</span>
  </button>
  <button class="context-menu-item">
    Save As...
    <span class="context-menu-shortcut">⇧⌘S</span>
  </button>
</div>

Group related items under a context-menu-label and divide groups with a context-menu-separator.

<div
  id="cm-groups-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu" data-sp-toggle="#cm-groups-area">
  <div class="context-menu-label">File</div>
  <button class="context-menu-item">
    New File
    <span class="context-menu-shortcut">⌘N</span>
  </button>
  <button class="context-menu-item">
    Open File
    <span class="context-menu-shortcut">⌘O</span>
  </button>
  <button class="context-menu-item">
    Save
    <span class="context-menu-shortcut">⌘S</span>
  </button>
  <div class="context-menu-separator"></div>
  <div class="context-menu-label">Edit</div>
  <button class="context-menu-item">
    Undo
    <span class="context-menu-shortcut">⌘Z</span>
  </button>
  <button class="context-menu-item">
    Redo
    <span class="context-menu-shortcut">⇧⌘Z</span>
  </button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item context-menu-item-destructive">
    Delete
    <span class="context-menu-shortcut">⌫</span>
  </button>
</div>

Lead items with an icon, sized automatically.

<div
  id="cm-icons-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu" data-sp-toggle="#cm-icons-area">
  <button class="context-menu-item">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
    Copy
  </button>
  <button class="context-menu-item">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><path d="M8.12 8.12 12 12"/><path d="M20 4 8.12 15.88"/><circle cx="6" cy="18" r="3"/><path d="M14.8 14.8 20 20"/></svg>
    Cut
  </button>
  <button class="context-menu-item">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 14h10"/><path d="M16 4h2a2 2 0 0 1 2 2v1.344"/><path d="m17 18 4-4-4-4"/><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>
    Paste
  </button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item context-menu-item-destructive">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
    Delete
  </button>
</div>

Checkbox items

Make items checkable with context-menu-item-checkbox. A hidden checkbox input holds the state, so checked, change events, and form submission work like any input, and toggling keeps the menu open.

<div
  id="cm-check-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu" data-sp-toggle="#cm-check-area">
  <label class="context-menu-item context-menu-item-checkbox">
    <input type="checkbox" checked />
    Show Bookmarks Bar
  </label>
  <label class="context-menu-item context-menu-item-checkbox">
    <input type="checkbox" />
    Show Full URLs
  </label>
  <label class="context-menu-item context-menu-item-checkbox">
    <input type="checkbox" checked />
    Show Developer Tools
  </label>
</div>

Radio items

Give context-menu-item-radio inputs a shared name and the browser keeps the set exclusive. Read the choice with input[name=cm-radio-theme]:checked.

<div
  id="cm-radio-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu" data-sp-toggle="#cm-radio-area">
  <div class="context-menu-label">People</div>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-radio-people" value="pedro" checked />
    Pedro Duarte
  </label>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-radio-people" value="colm" />
    Colm Tuite
  </label>
  <div class="context-menu-separator"></div>
  <div class="context-menu-label">Theme</div>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-radio-theme" value="light" checked />
    Light
  </label>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-radio-theme" value="dark" />
    Dark
  </label>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-radio-theme" value="system" />
    System
  </label>
</div>

Destructive items

Mark a dangerous action with context-menu-item-destructive.

<div
  id="cm-destructive-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click here</span>
  <span class="hidden pointer-coarse:inline-block">Long press here</span>
</div>
 
<div class="context-menu" data-sp-toggle="#cm-destructive-area">
  <button class="context-menu-item">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
    Edit
  </button>
  <button class="context-menu-item">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v13"/><path d="m16 6-4-4-4 4"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/></svg>
    Share
  </button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item context-menu-item-destructive">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
    Delete
  </button>
</div>

Set which side of the pointer the menu opens on with data-sp-placement. It accepts any Floating UI placement, plus the logical sides inline-start and inline-end that follow the text direction, and flips on its own when there isn't room.

<div class="grid w-full max-w-sm grid-cols-2 gap-4">
<div
  id="cm-side-top"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click (top)</span>
  <span class="hidden pointer-coarse:inline-block">Long press (top)</span>
</div>
<div class="context-menu" data-sp-toggle="#cm-side-top" data-sp-placement="top-start">
  <button class="context-menu-item">Back</button>
  <button class="context-menu-item">Forward</button>
  <button class="context-menu-item">Reload</button>
</div>
 
<div
  id="cm-side-right"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click (right)</span>
  <span class="hidden pointer-coarse:inline-block">Long press (right)</span>
</div>
<div class="context-menu" data-sp-toggle="#cm-side-right" data-sp-placement="right-start">
  <button class="context-menu-item">Back</button>
  <button class="context-menu-item">Forward</button>
  <button class="context-menu-item">Reload</button>
</div>
 
<div
  id="cm-side-bottom"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click (bottom)</span>
  <span class="hidden pointer-coarse:inline-block">Long press (bottom)</span>
</div>
<div class="context-menu" data-sp-toggle="#cm-side-bottom" data-sp-placement="bottom-start">
  <button class="context-menu-item">Back</button>
  <button class="context-menu-item">Forward</button>
  <button class="context-menu-item">Reload</button>
</div>
 
<div
  id="cm-side-left"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block">Right click (left)</span>
  <span class="hidden pointer-coarse:inline-block">Long press (left)</span>
</div>
<div class="context-menu" data-sp-toggle="#cm-side-left" data-sp-placement="left-start">
  <button class="context-menu-item">Back</button>
  <button class="context-menu-item">Forward</button>
  <button class="context-menu-item">Reload</button>
</div>
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. Flip directional icons with rtl:rotate-180. See the RTL guide for details.

<div id="cm-rtl-demo" class="w-full max-w-xs" dir="rtl">
<div
  id="cm-rtl-area"
  class="context-menu-trigger flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm"
>
  <span class="hidden pointer-fine:inline-block" data-i18n="rightClick">انقر بزر الماوس الأيمن هنا</span>
  <span class="hidden pointer-coarse:inline-block" data-i18n="longPress">اضغط مطولاً هنا</span>
</div>
 
<div class="context-menu w-48" data-sp-toggle="#cm-rtl-area">
  <button id="cm-rtl-nav" class="context-menu-item">
    <span data-i18n="navigation">التنقل</span>
    <svg class="ms-auto rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </button>
  <button id="cm-rtl-more" class="context-menu-item">
    <span data-i18n="moreTools">المزيد من الأدوات</span>
    <svg class="ms-auto rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </button>
  <div class="context-menu-separator"></div>
  <label class="context-menu-item context-menu-item-checkbox">
    <input type="checkbox" checked />
    <span data-i18n="showBookmarks">إظهار الإشارات المرجعية</span>
  </label>
  <label class="context-menu-item context-menu-item-checkbox">
    <input type="checkbox" />
    <span data-i18n="showFullUrls">إظهار عناوين URL الكاملة</span>
  </label>
  <div class="context-menu-separator"></div>
  <div class="context-menu-label" data-i18n="people">الأشخاص</div>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-rtl-people" value="pedro" checked />
    <span data-i18n="pedro">Pedro Duarte</span>
  </label>
  <label class="context-menu-item context-menu-item-radio">
    <input type="radio" name="cm-rtl-people" value="colm" />
    <span data-i18n="colm">Colm Tuite</span>
  </label>
</div>
 
<div class="context-menu context-menu-sub w-44" data-sp-toggle="#cm-rtl-nav" data-sp-mode="hover" data-sp-placement="inline-end-start">
  <button class="context-menu-item">
    <svg class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
    <span data-i18n="back">رجوع</span>
    <span class="context-menu-shortcut">⌘[</span>
  </button>
  <button class="context-menu-item" aria-disabled="true">
    <svg class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
    <span data-i18n="forward">تقدم</span>
    <span class="context-menu-shortcut">⌘]</span>
  </button>
  <button class="context-menu-item">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
    <span data-i18n="reload">إعادة تحميل</span>
    <span class="context-menu-shortcut">⌘R</span>
  </button>
</div>
 
<div class="context-menu context-menu-sub w-44" data-sp-toggle="#cm-rtl-more" data-sp-mode="hover" data-sp-placement="inline-end-start">
  <button class="context-menu-item">
    <span data-i18n="savePage">حفظ الصفحة...</span>
  </button>
  <button class="context-menu-item">
    <span data-i18n="createShortcut">إنشاء اختصار...</span>
  </button>
  <button class="context-menu-item">
    <span data-i18n="nameWindow">تسمية النافذة...</span>
  </button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item">
    <span data-i18n="developerTools">أدوات المطور</span>
  </button>
  <div class="context-menu-separator"></div>
  <button class="context-menu-item context-menu-item-destructive">
    <span data-i18n="delete">حذف</span>
  </button>
</div>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", rightClick: "انقر بزر الماوس الأيمن هنا", longPress: "اضغط مطولاً هنا", navigation: "التنقل", back: "رجوع", forward: "تقدم", reload: "إعادة تحميل", moreTools: "المزيد من الأدوات", savePage: "حفظ الصفحة...", createShortcut: "إنشاء اختصار...", nameWindow: "تسمية النافذة...", developerTools: "أدوات المطور", delete: "حذف", showBookmarks: "إظهار الإشارات المرجعية", showFullUrls: "إظهار عناوين URL الكاملة", people: "الأشخاص", pedro: "Pedro Duarte", colm: "Colm Tuite" },
    he: { dir: "rtl", rightClick: "לחץ לחיצה ימנית כאן", longPress: "לחץ לחיצה ארוכה כאן", navigation: "ניווט", back: "חזור", forward: "קדימה", reload: "רענן", moreTools: "כלים נוספים", savePage: "שמור עמוד...", createShortcut: "צור קיצור דרך...", nameWindow: "שם חלון...", developerTools: "כלי מפתח", delete: "מחק", showBookmarks: "הצג סימניות", showFullUrls: "הצג כתובות URL מלאות", people: "אנשים", pedro: "Pedro Duarte", colm: "Colm Tuite" },
    en: { dir: "ltr", rightClick: "Right click here", longPress: "Long press here", navigation: "Navigation", back: "Back", forward: "Forward", reload: "Reload", moreTools: "More Tools", savePage: "Save Page...", createShortcut: "Create Shortcut...", nameWindow: "Name Window...", developerTools: "Developer Tools", delete: "Delete", showBookmarks: "Show Bookmarks", showFullUrls: "Show Full URLs", people: "People", pedro: "Pedro Duarte", colm: "Colm Tuite" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("cm-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>

Options

Set each option with its own data-sp-* attribute on the context-menu element.

Attribute	Values	Default
`data-sp-toggle`	CSS selector	None
`data-sp-placement`	Floating UI placement	`right-start`
`data-sp-offset`	Number	`0`
`data-sp-align-offset`	Number	`4`
`data-sp-mode`	`context` \| `hover`	`context`
`data-sp-item`	CSS selector	`.context-menu-item`

A submenu sets data-sp-mode="hover" so it opens from its item instead of a right click.

<div
  class="context-menu"
  data-sp-toggle="#my-area"
  data-sp-placement="bottom-start"
></div>

JavaScript

Events

Lifecycle events fire on the context menu element. The before* events are cancelable.

Event	When
`sp-beforeshow`	Before opening (cancelable)
`sp-show`	Opening
`sp-shown`	Open and settled
`sp-beforehide`	Before closing (cancelable)
`sp-hide`	Closing
`sp-hidden`	Closed

menu.addEventListener("sp-show", () => {
  console.log("context menu opened");
});

Methods

Get the instance with sp.contextMenu(el), then call its methods:

Method	Description
`show()`	Open the menu at its area
`hide()`	Close the menu
`toggle()`	Open if closed, else close

sp.contextMenu(document.querySelector(".context-menu")).show();

Tailwind CSS Context Menu

Usage

Examples

Basic context menu

Context menu submenu

Keyboard shortcuts

Context menu groups

Context menu items with icons