Yii 2 Context Menu

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-krajee-base extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The yii2-context-menu allows you to add and render a context menu to any element on the page. A context menu is a pop up menu that one initiates on any element by right clicking the mouse in that target element. This widget is a wrapper for the bootstrap-contextmenu plugin which is styled for Bootstrap 3. The widget uses the \yii\bootstrap\Dropdown widget to generate a dropdown menu.

The preferred way to install this extension is through composer. Either run:

$ php composer.phar require kartik-v/yii2-context-menu "*"

or add:

"kartik-v/yii2-context-menu": "*"

to the require section of your composer.json file. Then run:

php composer.phar update

to get the updated package on your application install.

The Context Menu widget enables you to setup the following properties:
  • items: array the list of menu items in the dropdown as required by the \yii\bootstrap\Dropdown widget. Each array element can be either an HTML string, or an array representing a single menu with the following structure:

    • label: string, required, the label of the item link

    • url: string, optional, the url of the item link. Defaults to "#".

    • visible: boolean, optional, whether this menu item is visible. Defaults to true.

    • linkOptions: array, optional, the HTML attributes of the item link.

    • options: array, optional, the HTML attributes of the item.

    • items: array, the structure is the same as this property. Note that Bootstrap doesn't support dropdown submenu. You have to add your own CSS styles to support it.

    • To insert a divider use <li role="presentation" class="divider"></li>.

  • encodeLabels: boolean whether the labels for header items should be HTML-encoded. This is exactly same as the encodeLabels property in \yii\bootstrap\Dropdown.

  • menuOptions: array the HTML attributes for the dropdown menu UL tag. This is exactly same as the options property in \yii\bootstrap\Dropdown.

  • menuContainer: array the HTML attributes for the dropdown menu container that will enclose the dropdown menu. This container element id will be the target for the bootstrap-contextmenu plugin. The following special options are recognized:

    • tag: string, optional, the tag for rendering the dropdown menu container. Defaults to div.

  • options: array the HTML attributes for the context menu target container, within which the context menu action will be triggered on mouse right click. The following special options are recognized:

    • tag: string, optional, the tag for rendering the context menu target container. Defaults to span.

  • pluginOptions: array the plugin settings/options for the bootstrap-contextmenu jquery plugin. Refer the plugin options documentation for details on the available configurable options.

  • pluginEvents: array the ContextMenu JQuery events. You must define events in event-name=>event-function format. All events will be stacked in the sequence. Refer the plugin events documentation for usage. Events can be configured like below:

    pluginEvents = [
        "show.bs.context"=>"function() { log("show.bs.context"); }",
        "hide.bs.context"=>"function() { log("hide.bs.context"); }",
    ];
    

A text to test context menu. Right click here.

Basic context menu usage on a specific text within a paragaph.


Right click anywhere inside this container.

Context menu usage on a div container


Right click anywhere inside this container but note that context is disabled in this highlighted span element.

Activate context menu within a div but not for spans within the div


use kartik\cmenu\ContextMenu;
$items = [
    ['label'=>'Action', 'url'=>'#'],
    ['label'=>'Another action', 'url'=>'#'],
    ['label'=>'Something else here', 'url'=>'#'],
    '<li class="divider"></li>',
    ['label'=>'Separated link', 'url'=>'#'],
];

// Basic context menu usage on a specific text within a paragaph.
ContextMenu::begin(['items'=>$items]);
echo '<span class="kv-context">Right click here.</span>';
ContextMenu::end();

// Context menu usage on a div container
ContextMenu::begin(['items'=>$items, 'options'=>['tag'=>'div']]);
echo '<div class="well">Right click anywhere inside this container.</div>';
ContextMenu::end();

// Activate context menu within a div but not for `spans` within the div
$script = <<< 'JS'
function (e, element, target) {
    e.preventDefault();
    if (e.target.tagName == 'SPAN') {
        e.preventDefault();
        this.closemenu();
        return false;
    }
    return true;
}
JS;
ContextMenu::begin([
    'items'=>$items,
    'options'=>['tag'=>'div'],
    'pluginOptions'=>['before'=>$script]
]);
echo '<div class="well">Right click anywhere inside this container but note that
    <span class="text-danger">context is disabled in this highlighted span element</span></div>';
ContextMenu::end();

yii2-context-menu is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.