Bootstrap Context Menu

January 04, 2020 No comments jQuery Context-Menu Menu Bootstrap

1. Introduction

Context.js is a lightweight jQuery library for contextual menus. The plugin was designed with the Bootstrap framework in mind but can be also used separately with a standalone stylesheet. Context.js plugin has many features like recursive menus support, horizontal space detection, adding/removing menu items programmatically, event-based links and many more. The plugin comes with multiple configuration options and it is easy to integrate with any website or application.

Context menu for bootstrap

2. Plugin Overview

Library Context.js
Author Jacob Kelley
Licence MIT Licence
Repository GitHub
Dependencies Bootstrap 4.1.3 and jQuery 1.3.1 or Latest version

Demo

3. How to install and use Context.js jQuery plugin

To install Context.js jQuery plugin, follow below steps.

1. Load jQuery and Bootstra assets (CSS styles and JS files) into your website:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2. Include context menu’s CSS and JavaScript files:

<!-- Context Menu CSS -->
<link rel="stylesheet" href="css/context.standalone.css">

<!-- Context Menu JS -->
<script src="js/context.js"></script>

3. Create DIV element on which the context menu will be attached:

<div class="myContextMenu"> Right Click Here... </div>

4. Programmatically add menu items:

var test_menu = {
    id: 'TEST-MENU',
    data: [
        {
            header: 'Example'
        },
        {
            icon: 'glyphicon-plus',
            text: 'Create',
            action: function(e, selector) { alert('Create clicked on ' + selector.prop("tagName") + ":" + selector.attr("id")); }
        },
        {
            icon: 'glyphicon-edit',
            text: 'Edit',
            action: function(e, selector) { alert('Edit clicked on ' + selector.prop("tagName") + ":" + selector.attr("id")); }
        },
        {
            icon: 'glyphicon-list-alt',
            text: 'View Data As:',
            subMenu : [
            {
                text: 'Text',
                action: function(e, selector) { alert('Text clicked on ' + selector.prop("tagName") + ":" + selector.attr("id")); }
            },
            {
                text: 'Image',
                subMenu: [
                    {
                        menu_item_src : exampleMenuItemSource
                    }
                ]
            }
            ]
        },
        {
            divider: true
        },
        {
            header: 'Another Example'
        },
        {
            icon: 'glyphicon-trash',
            text: 'Delete',
            action: function(e, selector) { alert('Delete clicked on ' + selector.prop("tagName") + ":" + selector.attr("id")); }
        }
    ]
};

5. Initialize Context.js plugin and attach menu structure to our DIV using the following:

context.init({preventDoubleContext: false});
context.attach('#myContextMenu', test_menu);

Context.js the plugin will attach the right mouse click to DIV panel and show the context menu instead of the default browser menu.

4. Conclusion

In this article, we showcased Context.js jQuery plugin that can be used to create an awesome context menu with submenu items. The plugin is easy to configure and can be attached to any HTML element. For example, web developers can use it to present an action list for selected table items.

{{ message }}

{{ 'Comments are closed.' | trans }}