#### Extra - Context Menu

Statistics Invoices Schedule

###### Plugin initialization

Context menu initialization options

###### Using data attributes

Add `data-toggle="context"` to any element that needs a custom context menu. And point `data-target` attribute to your custom context menu.

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

    <div class="context-menu">
    	<div class="dropdown-menu">
    		<a href="#" class="dropdown-item">Action</a>
    		<a href="#" class="dropdown-item">Another action</a>
    		<div class="dropdown-divider"></div>
    		<a href="#" class="dropdown-item">Something else here</a>
    	</div>
    </div>

###### Using Javascript

Also content menu can be initialized via JavaScript call. In this case data attributes are not required, target can be set in plugin configuration.

    $('.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
    	},
    	scopes: 'tbody > tr'
    })

###### Content attachment

Card and content elements attachment

###### Card attachment

Current example demonstrates context menu attached to the whole card. Add `data-toggle="context"` to the card and point `data-target` attribute to the menu.

###### Element attachment

Current example demonstrates context menu attached to some element only instead of full card. Right click on current `card title` to see it in action

###### Inline attachment

Also context menu can be attached to the link or any other content elements like headings, paragraphs, span's, lists, labels, form components, buttons, button groups etc.

###### Exclude elements

Current example demonstrates context menu attached to the card content, excluding `<code>...</code>` phrase tag. Try to right click on the `code block`.

###### Table attachment

Example with context menu attached to the whole table.

# | Description | Date | Actions
--- | --- | --- | ---
1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 |
2 | Few quips galvanized the mock jury box. | July 14, 2014 |
3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |

###### Row attachment

Example with context menu attached to the table row. Attached to the first row.

# | Description | Date | Actions
--- | --- | --- | ---
1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 |
2 | Few quips galvanized the mock jury box. | July 14, 2014 |
3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |

###### Cell attachment

Example with context menu attached to the table cell only. Attached to cells with links.

# | Description | Date | Actions
--- | --- | --- | ---
1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 |
2 | Few quips galvanized the mock jury box. | July 14, 2014 |
3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |

###### Table content attachment

Example with context menu attached to the table content. Attached to action icons.

# | Description | Date | Actions
--- | --- | --- | ---
1 | Cozy sphinx waves quart jug of bad milk. | July 13, 2014 |
2 | Few quips galvanized the mock jury box. | July 14, 2014 |
3 | Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph. | July 15, 2014 |

###### Context menu options

Dropdown menu options and colors

###### Dropdown submenu

Context dropdown menu supports multi level menus as it uses default Bootstrap `dropdown-menu` markup. As well as left sub menu direction using `.dropdown-submenu-left` helper class.

###### Dropdown options

Since context dropdown menu supports default Bootstrap `dropdown-menu` markup, any existing menu options can be used: disabled items, icons, borders, dividers etc.

###### Dynamic replacement

Current example demonstrates context menu, which contains an item, modified dynamically using `before: function () {...}` plugin function.

###### Name on selection

Current example demonstrates context menu with function that shows menu name on item selection using `onItem: function () {...}` plugin function.

###### Menu sizing

Context menus support all optional styles available for dropdowns - colors, sizes, headers, dividers, icons, badges, checkboxes etc. To use, add single or multiple optional classes to dropdown elements.

###### Solid color

Besides custom state colors, context dropdown menu supports predefined and custom solid background colors. Just add `.bg-*` class to the existing context menu.

###### Plugin events

Context dropdown menu events

###### onShow event

Current example demonstrates context menu with `show.bs.context`event. This event fires immediately when the context dropdown menu is opened.

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

###### onShown event

Current example demonstrates context menu with `shown.bs.context`event. This event is fired when the dropdown has been made visible to the user.

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

###### onHide event

Current example demonstrates context menu with `hide.bs.context`event. This event is fired immediately when the hide instance method has been called.

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

###### onHidden event

Current example demonstrates context menu with `hidden.bs.context`event. This event is fired when the dropdown has finished being hidden from the user.

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