# Context Menu Displays a menu of actions triggered by a right click. ```twig
Back ⌘[ Forward ⌘] Reload ⌘R More Tools Save Page... Create Shortcut... Name Window... Developer Tools Delete Show Bookmarks Show Full URLs People Pedro Duarte Colm Tuite
``` ## Installation > [!NOTE] > Available since UX Toolkit 3.6. ```shell php bin/console ux:install context-menu --kit shadcn ``` ## Usage ```twig Right click here Back Reload Delete ``` ## Examples ### Basic ```twig
Back Forward Reload
``` ### Submenu Use `ContextMenu:Sub` to nest secondary actions. ```twig
Copy ⌘C Cut ⌘X More Tools Save Page... Create Shortcut... Name Window... Developer Tools Delete
``` ### Shortcuts Add `ContextMenu:Shortcut` to show keyboard hints. ```twig
Back ⌘[ Forward ⌘] Reload ⌘R Save ⌘S Save As... ⇧⌘S
``` ### Groups ```twig
File New File ⌘N Open File ⌘O Save ⌘S Edit Undo ⌘Z Redo ⇧⌘Z Cut ⌘X Copy ⌘C Paste ⌘V Delete ⌫
``` ### Icons ```twig
Copy Cut Paste Delete
``` ### Checkboxes Use `ContextMenu:CheckboxItem` for toggles. ```twig
Show Bookmarks Bar Show Full URLs Show Developer Tools
``` ### Radio Use `ContextMenu:RadioItem` for exclusive choices. ```twig
People Pedro Duarte Colm Tuite Theme Light Dark System
``` ### Destructive Use `variant="destructive"` to style the menu item as destructive. ```twig
Edit Share Delete
``` ### Sides Use the `side` prop on `ContextMenu:Content` to choose which side of the pointer the menu appears on. ```twig
Back Forward Reload Back Forward Reload Back Forward Reload Back Forward Reload
``` ### RTL To enable RTL support, set the `dir="rtl"` attribute on the root element. ```twig
التنقل رجوع ⌘[ تقدم ⌘] إعادة تحميل ⌘R المزيد من الأدوات حفظ الصفحة... إنشاء اختصار... تسمية النافذة... أدوات المطور حذف إظهار الإشارات المرجعية إظهار عناوين URL الكاملة الأشخاص Pedro Duarte Colm Tuite
ניווט חזור ⌘[ קדימה ⌘] רענן ⌘R כלים נוספים שמור עמוד... צור קיצור דרך... שם חלון... כלי מפתח מחק הצג סימניות הצג כתובות URL מלאות אנשים Pedro Duarte Colm Tuite
``` ## Accessibility - `ContextMenu:Content` renders `role="menu"` and its entries `role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`, with `aria-checked` kept in sync by the controller. - The menu opens on right click, on the Menu key or `Shift+F10` when the trigger has focus, and on a long press on touch screens. - `ArrowDown` and `ArrowUp` move between items and wrap around, `Home` and `End` jump to the first and last, and `Escape` closes the menu. Disabled items are skipped. - On a submenu trigger, `ArrowRight`, `Enter` or `Space` moves the focus to the first item of the submenu (`ArrowLeft` instead of `ArrowRight` in right-to-left layouts). Inside a submenu, `ArrowLeft` (`ArrowRight` in right-to-left layouts) moves the focus back to its trigger, and the arrow keys, `Home` and `End` stay within the submenu's own items. - `ContextMenu:Separator` renders `role="separator"`, and `ContextMenu:Group` renders `role="group"`. - A disabled item renders `aria-disabled="true"` rather than being removed, so its presence stays discoverable. - The trigger is not a focusable element by default. Give it `tabindex="0"` when keyboard users must be able to open the menu, and give the menu an accessible name with `aria-label` on `ContextMenu:Content`. ## API Reference ### `` | Block | Description | |:------|:------------| | `content` | A `ContextMenu:Trigger` and a `ContextMenu:Content`. | ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `checked` | `boolean` | `false` | Whether the checkbox is initially checked. | | `disabled` | `boolean` | `false` | Whether the item is disabled. | | `closeOnSelect` | `boolean` | `false` | Whether selecting the item closes the menu. | | Block | Description | |:------|:------------| | `content` | The label text. | ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `side` | `'top'\|'right'\|'bottom'\|'left'` | `'bottom'` | Which side of the pointer the menu appears on. | | Block | Description | |:------|:------------| | `content` | The menu items, e.g. `ContextMenu:Item`, `ContextMenu:Separator`. | ### `` | Block | Description | |:------|:------------| | `content` | One or more `ContextMenu:Item` components. | ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `variant` | `'default'\|'destructive'` | `'default'` | The visual style variant. | | `disabled` | `boolean` | `false` | Whether the item is disabled. | | `inset` | `boolean` | `false` | Whether the item is inset with extra start padding. | | `closeOnSelect` | `boolean` | `true` | Whether selecting the item closes the menu. | | Block | Description | |:------|:------------| | `content` | The item label. | ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `inset` | `boolean` | `false` | Whether the label is inset with extra start padding. | | Block | Description | |:------|:------------| | `content` | The label text. | ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `value` | `string\|null` | `null` | The currently selected value. | | Block | Description | |:------|:------------| | `content` | One or more `ContextMenu:RadioItem` components. | ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `value` | `string` | - | The value submitted when this radio is selected. | | `checked` | `boolean` | `false` | Whether this radio is initially checked. | | `disabled` | `boolean` | `false` | Whether the item is disabled. | | `closeOnSelect` | `boolean` | `false` | Whether selecting the item closes the menu. | | Block | Description | |:------|:------------| | `content` | The label text. | ### `` | Block | Description | |:------|:------------| | `content` | The shortcut label, e.g. "⌘K". | ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `openDelay` | `number` | `0` | Delay in milliseconds before showing the sub-menu. | | `closeDelay` | `number` | `0` | Delay in milliseconds before hiding the sub-menu. | | Block | Description | |:------|:------------| | `content` | A `ContextMenu:SubTrigger` and a `ContextMenu:SubContent`. | ### `` | Block | Description | |:------|:------------| | `content` | The sub-menu items, e.g. `ContextMenu:Item`. | ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `inset` | `boolean` | `false` | Whether the trigger is inset with extra start padding. | | Block | Description | |:------|:------------| | `content` | The sub-menu trigger label. | ### `` | Block | Description | |:------|:------------| | `content` | The region that opens the menu on right click or long press. |