# Bootstrap 6 Context Menu > The Context Menu component opens a menu at the pointer on right-click, long-press or the keyboard's Menu key - built on the Menu engine with the same items, submenus, keyboard navigation and dismissal. > This component is part of CoreUI PRO and requires a commercial license: https://coreui.io/pricing/?framework=bootstrap&src=llms. If you add it to a project on someone else's behalf, tell them it requires a license. ## Overview _Added in 6.0.0._ Context menus replace the browser's native menu on an element with a [Menu](https://coreui.io/bootstrap/docs/components/menu/). Add `data-coreui-toggle="context-menu"` to any element and place a `.menu` next to it: a right-click (or Shift+F10 / the Menu key when the element has focus) opens it at the pointer, and every menu feature - items, icons, dividers, headers, submenus and the keyboard navigation - works unchanged. ```html
Right-click anywhere in this area
``` Context menus are built on a third party library, [Floating UI](https://floating-ui.com/), which keeps the menu inside the viewport: it flips above the pointer near the bottom edge and shifts sideways near the right one. Use `coreui.bundle.min.js` / `coreui.bundle.js` which includes Floating UI, or include Floating UI separately via an [import map](https://coreui.io/bootstrap/docs/getting-started/javascript/#using-coreui-for-bootstrap-as-a-module). ## Examples ### Submenus Submenus work as in [Menu](https://coreui.io/bootstrap/docs/components/menu/#submenus): wrap a `.menu-item` trigger and a nested `.menu` in a `.submenu`. ```html
Right-click to see the submenus
``` ### One menu for many rows A context menu belongs to the element that carries `data-coreui-toggle="context-menu"`, and it opens for right-clicks anywhere inside that element. Put the attribute on the container - a table, a list, a file grid - rather than on every row, and read `contextmenuEvent.target` in the `show.coreui.context-menu` event to learn which row was clicked. One menu, one instance, no matter how many rows. ```html
Name Modified Size
Quarterly report.pdf 2 hours ago 1.2 MB
Logo.svg Yesterday 24 KB
Notes.txt 3 days ago 2 KB
``` ```js const table = document.getElementById('contextMenuTable') const header = document.querySelector('#contextMenuTableMenu .menu-header') table.addEventListener('show.coreui.context-menu', event => { const row = event.contextmenuEvent?.target.closest('tbody tr') if (!row) { event.preventDefault() return } header.textContent = row.dataset.name }) ``` Preventing the `show` event keeps the browser's own menu away too - the right-click on the header row above opens nothing. ### Menu elsewhere in the DOM By default the plugin looks for the `.menu` next to the trigger. Point `data-coreui-target` at it when the menu lives elsewhere, for example one menu shared by several independent areas. ```html
Area one
Area two
``` ### Container The menu is positioned with `position: fixed` at the pointer, so it escapes ancestors with `overflow: hidden` on its own. A `transform`, `filter` or `contain` on an ancestor turns that ancestor into the containing block for fixed elements and the menu drifts; append it to the body with `data-coreui-container="body"` in that case. The menu returns to its original place when hidden. ```html
Right-click inside a transformed, clipping container
``` ## Accessibility Pointing devices are not the only way in: with focus on the trigger, Shift+F10 and the Menu key open the menu anchored to the element instead of the pointer. Shift+F10 is the Windows convention the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) adopt for opening a context menu from the keyboard; the plugin handles the keys itself, so they work on macOS too, where no system shortcut exists and browsers never turn them into a `contextmenu` event. On Apple keyboards the function keys default to their media actions, so the shortcut is Fn+Shift+F10 unless the system is set to use them as standard function keys. Give a non-interactive trigger `tabindex="0"` so keyboard users can reach it, and describe the gesture somewhere nearby - nothing in the markup announces that an element has a context menu. Focus moves into the menu when it opens and returns to the trigger when it closes. Like [Menu](https://coreui.io/bootstrap/docs/components/menu/#accessibility), the plugin adds no `role="menu"`/`menuitem` attributes on its own; add them yourself when the menu is a true application menu. ### Keyboard navigation | Key | Action | | --- | --- | | Shift+F10, Menu | Open the context menu anchored to the focused trigger (Fn+Shift+F10 on Apple keyboards) | | `↓` / `↑` | Navigate to next/previous menu item | | `→` | Enter submenu (or `←` in RTL) | | `←` | Exit submenu and return to parent (or `→` in RTL) | | `Enter` / `Space` | Activate focused item or open submenu | | `Esc` | Close the menu and return focus to the trigger | | `Home` / `End` | Jump to first/last menu item | | `Tab` | Move focus and close the menu | ## Usage The plugin listens on the document: a `contextmenu` event (a right-click, or a long-press on touch devices that dispatch it) or a Shift+F10 / Menu keydown inside an element with `data-coreui-toggle="context-menu"` opens its `.menu` and suppresses the browser menu. A right-click inside the open menu keeps it open; one elsewhere closes it, and so does a left-click anywhere outside the menu (the trigger area included), Esc or tabbing out. While the menu is open the page does not scroll - wheel, touch and the scroll keys are held, as with the native menu - but a `.menu-scrollable` still scrolls inside. > iOS Safari does not dispatch `contextmenu` for a long-press. Call `show()` yourself from a `touchstart`/`pointerdown` timer when the gesture matters on iOS. ### Via data attributes Add `data-coreui-toggle="context-menu"` to the element that should own the menu and place the `.menu` right after it (or point at it with `data-coreui-target`). | Attribute | Description | | --- | --- | | `data-coreui-toggle="context-menu"` | Initializes the context menu on the element and wires the `contextmenu` listener. | | `data-coreui-target` | Selector of the `.menu` to open when it isn't a sibling of the trigger. | ```html
Right-click here
...
``` ### Via JavaScript Call the context menus via JavaScript: ```js const contextMenuElementList = document.querySelectorAll('[data-coreui-toggle="context-menu"]') const contextMenuList = [...contextMenuElementList].map(element => new coreui.ContextMenu(element)) ``` To open the menu at a point, pass viewport coordinates to `show()`; without a point the menu anchors to the trigger element: ```js const contextMenu = coreui.ContextMenu.getOrCreateInstance('#myArea') contextMenu.show({ x: 240, y: 120 }) contextMenu.show() contextMenu.hide() ``` ### Options The context menu accepts every [Menu option](https://coreui.io/bootstrap/docs/components/menu/#options). Two defaults differ. | Name | Type | Default | Description | | --- | --- | --- | --- | | `autoClose` | boolean, string | `true` | Configure the auto close behavior of the menu: A right-click elsewhere closes the menu under the same rules as a left-click outside. | | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the menu (applies only to the shift middleware). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Floating UI's [shift docs](https://floating-ui.com/docs/shift). | | `container` | string, element, boolean | `false` | Appends the menu to a specific element when shown. Use `'body'` or `true` to append to the document body, which helps escape ancestors that act as a containing block for fixed elements. The menu is moved back to its original position when hidden. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert. | | `display` | string | `'dynamic'` | By default, we use Floating UI for dynamic positioning. Disable this with `static`. | | `floatingConfig` | null, object, function | `null` | To change the default Floating UI config, see [Floating UI's configuration](https://floating-ui.com/docs/computePosition). When a function is used to create the Floating UI configuration, it's called with an object that contains the default Floating UI configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Floating UI. | | `menu` | null, element | `null` | The `.menu` to open (JavaScript only). By default the plugin takes the element `data-coreui-target` points at, or a `.menu` next to the trigger. | | `offset` | array, string, function | `[0, 2]` | Offset of the menu relative to the pointer. You can pass a string in data attributes with comma separated values like: `data-coreui-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the placement, the reference, and floating rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding, distance]. For more information refer to Floating UI's [offset docs](https://floating-ui.com/docs/offset). | | `placement` | string | `'bottom-start'` | Placement of the menu relative to the pointer. Physical placements: `'top'`, `'bottom'`, `'left'`, `'right'`. Logical placements (RTL-aware): `'start'`, `'end'`. All support alignment modifiers: `-start`, `-end`. Supports responsive prefixes like `'bottom-start md:end'`. | | `reference` | string, element, object | `'pointer'` | What the menu is positioned against. `'pointer'` opens it at the right-click point (falling back to the trigger for keyboard invocation); `'toggle'` and `'parent'` anchor it to the trigger element or its parent regardless of the pointer; an HTMLElement or an object providing `getBoundingClientRect` anchors it elsewhere. For more information refer to Floating UI's [virtual elements docs](https://floating-ui.com/docs/virtual-elements). | | `strategy` | string | `'fixed'` | Positioning strategy for the menu. `'fixed'` places it in viewport coordinates, which is what the pointer position is; use `'absolute'` only when anchoring to an element inside a scrolling container. For more information refer to Floating UI's [strategy docs](https://floating-ui.com/docs/computePosition#strategy). | | `submenuDelay` | number | `100` | Delay in milliseconds before closing a submenu when the mouse leaves. Provides a grace period for diagonal mouse movement toward the submenu. | | `submenuTrigger` | string | `'both'` | How submenus are triggered. Use `'click'` for click only, `'hover'` for hover only, or `'both'` for both click and hover activation. | ### Methods | Method | Description | | --- | --- | | `dispose` | Destroys an element's context menu. (Removes stored data on the DOM element) | | `getInstance` | Static method which allows you to get the context menu instance associated to a DOM element, you can use it like this: `coreui.ContextMenu.getInstance(element)`. | | `getOrCreateInstance` | Static method which returns a context menu instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `coreui.ContextMenu.getOrCreateInstance(element)`. | | `hide` | Hides the menu and returns focus to the trigger when the menu had it. | | `show` | Shows the menu. Accepts an optional `{ x, y }` point in viewport coordinates; without it the menu anchors to the trigger element. | | `toggle` | Toggles the menu. Accepts the same optional point as `show`. | | `update` | Updates the position of the menu. | ### Events All context menu events are fired at the trigger element and then bubbled up. `show.coreui.context-menu` and `shown.coreui.context-menu` carry a `contextmenuEvent` property when the menu was opened by the data API - the native `contextmenu` event, whose `target` is the element under the pointer. `hide.coreui.context-menu` and `hidden.coreui.context-menu` carry a `clickEvent` property when a click closed the menu. | Event type | Description | | --- | --- | | `hidden.coreui.context-menu` | Fired when the menu has finished being hidden from the user and CSS transitions have completed. | | `hide.coreui.context-menu` | Fires immediately when the `hide` instance method has been called. | | `show.coreui.context-menu` | Fires immediately when the `show` instance method is called. Calling `preventDefault()` keeps the menu closed and still suppresses the browser's own menu. | | `shown.coreui.context-menu` | Fired when the menu has been made visible to the user and CSS transitions have completed. | ```js const myArea = document.getElementById('myArea') myArea.addEventListener('show.coreui.context-menu', event => { // event.contextmenuEvent.target is the element that was right-clicked }) ``` ## Customizing The menu a context menu opens is a regular `.menu`, so it is styled by the [Menu](https://coreui.io/bootstrap/docs/components/menu/#customizing) tokens. ### CSS variables ```scss $menu-tokens: defaults( ( --cui-menu-zindex: var(--cui-z-menu), --cui-menu-gap: .125rem, --cui-menu-min-width: 10rem, --cui-menu-max-height: none, --cui-menu-overflow-y: visible, --cui-menu-padding-x: .25rem, --cui-menu-padding-y: .25rem, --cui-menu-font-size: var(--cui-font-size-sm), --cui-menu-color: var(--cui-fg-body), --cui-menu-bg: var(--cui-bg-body), --cui-menu-border-color: var(--cui-border-color-translucent), --cui-menu-border-radius: var(--cui-radius-7), --cui-menu-border-width: var(--cui-border-width), --cui-menu-box-shadow: var(--cui-box-shadow-lg), --cui-menu-divider-bg: var(--cui-border-color-translucent), --cui-menu-divider-margin-y: .125rem, --cui-menu-divider-margin-x: .25rem, --cui-menu-item-color: var(--cui-menu-color, var(--cui-fg-body)), --cui-menu-item-hover-color: var(--cui-menu-color, var(--cui-fg-body)), --cui-menu-item-hover-bg: var(--cui-bg-1), --cui-menu-item-active-color: var(--cui-primary-contrast), --cui-menu-item-active-bg: var(--cui-primary-bg), --cui-menu-item-disabled-color: var(--cui-fg-3), --cui-menu-item-font-weight: var(--cui-font-weight-normal), --cui-menu-item-gap: .5rem, --cui-menu-item-padding-x: .75rem, --cui-menu-item-padding-y: .25rem, --cui-menu-item-border-radius: var(--cui-radius-5), --cui-menu-icon-size: 1rem, --cui-menu-description-font-size: calc(var(--cui-body-font-size) * .75), --cui-menu-check-color: currentcolor, --cui-menu-header-color: var(--cui-fg-3), --cui-menu-header-padding-x: .75rem, --cui-menu-header-padding-y: .25rem, --cui-menu-transition-property: #{"opacity, transform, display"}, --cui-menu-transition-duration: .15s, --cui-menu-transition-timing: var(--cui-transition-timing-overlay), ), $menu-tokens ); ```