Context Menu

Context menu plugin for Twitter's Bootstrap framework

Initialization


Using Data Attributes


Add data-toggle="context" to any element that needs a custom context menu and via CSS set position: relative to the element. Point data-target attribute to your custom context menu.

                            
                                <div class="context" data-toggle="context" data-target="#context-menu">
                                    ...
                                </div>

                                <div id="context-menu">
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a tabindex="-1" href="#">Action</a></li>
                                        ...
                                        <li><a tabindex="-1" href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            
                        

Using Javascript


Call the context menu via JavaScript:

                            
                                $('.context').contextmenu({
                                    target:'#context-menu',
                                    before: function(e,context) {
                                        // execute code before context menu if shown
                                    },
                                    onItem: function(context,e) {
                                        // execute on menu item selection
                                    }
                                })
                            
                        

Content Attachment


Attach To Card

This example demonstrate how to attach context menu to whole card. Add data-toggle="context" to the card and point data-target attribute to the menu.

Attach To Elements

You can attach context menu to element only instead of whole card. Try clicking on this text and outside text to notice the difference.

Exclude Elements

You can activate context menu within div but exclude elements like span, anchor, label, paragraphs, form components, buttons etc.. In this example we have excluded this span text. Try right click on text on red.

Options


Target


target - is the equivalent of the data-target attribute. It identifies the html of the menu that will be displayed.

Before


before - is a function that is called before the context menu is displayed. If this function returns false, the context menu will not be displayed. It is passed two parameters,

  • e - the original event. (You can do an e.preventDefault() to cancel the browser event).
  • context - the DOM element where right click urred.

On Item


onItem - is a function that is called when a menu item is clicked. Useful when you want to execute a specific function when an item is clicked. It is passed two parameters,

  • context - the DOM element where right click occured.
  • e - the click event of the menu item, $(e.target) is the item element.

Scopes


scopes - DOM selector for dynamically added context elements.

Events


onShow Event


show.bs.context - This event fires immediately when the menu is opened.

                            
                                $('#myMenu').on('show.bs.context',function () {
                                    // do something...
                                });
                            
                        

onShown Event


shown.bs.context - This event is fired when the dropdown has been made visible to the user.

                            
                                $('#myMenu').on('shown.bs.context',function () {
                                    // do something...
                                });
                            
                        

onHide Event


hide.bs.context - This event is fired immediately when the hide instance method has been called.

                            
                                $('#myMenu').on('hide.bs.context',function () {
                                    // do something...
                                });
                            
                        

onHidden Event


hidden.bs.context - This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

                            
                                $('#myMenu').on('hidden.bs.context',function () {
                                    // do something...
                                });
                            
                        

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now