Context Menu




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 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>

Using Javascript

Call the context menu via JavaScript:

                                    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.



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


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, $( is the item element.


scopes - DOM selector for dynamically added context elements.


onShow Event - This event fires immediately when the menu is opened.

                                $('#myMenu').on('',function () {
                                    // do something...

onShown Event - This event is fired when the dropdown has been made visible to the user.

                                $('#myMenu').on('',function () {
                                    // do something...

onHide Event - This event is fired immediately when the hide instance method has been called.

                                $('#myMenu').on('',function () {
                                    // do something...

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

                                $('#myMenu').on('',function () {
                                    // do something...

Theme Customizer

Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options



Buy Now