Getting started
Core
Utilities
Layout systems
Design
Components
Form elements
Others
Layout

JTB-ContextMenu

A dynamic right-click menu for enhanced user interactions.

About

The JTB-Contextmenu is a dynamic component designed to provide custom context menus that appear when users right-click on a specified trigger element. It allows for a more interactive and intuitive user experience by offering context-specific actions and options directly at the point of interaction.

With its flexible structure and customizable items, the JTB-Contextmenu can be tailored to fit a variety of use cases, from simple action lists to complex nested menus, making it a valuable tool for enhancing user interfaces.

How to use

To create a JTB-Contextmenu in your projects, use the <jtb-contextmenu> tag. This component is designed to display a custom context menu when a user right-clicks its trigger element. You can define menu items directly in HTML or populate them dynamically using JavaScript for enhanced flexibility.

To link a context menu to a trigger element, add the jtb-contextmenu attribute to the trigger. The attribute value should be the ID of your context menu element. This setup ensures the menu appears at the cursor position upon right-click, providing a seamless user experience.

<!-- Trigger element --> <jtb-button jtb-contextmenu='menu-1'></jtb-button> <!-- Contextmenu element --> <jtb-contextmenu id='menu-1' data='[[{"content":"Item 1 blah blah!"}], [{"content":"Item 2 blah blah!"}]]'></jtb-contextmenu>
/*----- Create contextmenu -----*/ var myElement = document.createElement('jtb-contextmenu'); /*----- Specify ID -----*/ myElement.id = 'menu-1'; /*----- Adjust content -----*/ myElement.data = [ [ { "content":"Item 1 blah blah!" }, { "content":"Item 2 blah blah!" } ] ]; /*----- Add element to body -----*/ document.body.append(myElement); /*----- Connect it to its trigger -----*/ document.getElementById('ddTrigger').setAttribute('jtb-contextmenu', 'menu-1');

Customization

As demonstrated in the example above (adding items into contextmenus), you can customize the JTB-ContextMenu element by applying one (or more) of its pre-defined attributes with the corresponding values. These attributes allow you to tailor the element to meet your specific requirements and preferences via modifying the component's behavior, functionality, appearance, design etc.

Content and display

data

To specify the items of context menu, use the element's data attribute. The data attribute should be an array that holds arrays (sections) which hold items as object where each object represents an item individually.

For each item, ensure that you've defined the content parameter with the desired text you want to display in that item.

<!-- Contextmenu element --> <jtb-contextmenu data='[[{"content":"Item 1 as plain text"}], [{"content":"Item 2 <b>as HTML</b>"}]]'></jtb-contextmenu>
/*----- Create contextmenu -----*/ var myElement = document.createElement('jtb-contextmenu'); /*----- Adjust content -----*/ myElement.data = [ [ { "content":"Item 1 content!" }, { "content":"Item 2 content <b>as html</b>!" } ] ];
Icon usage

To use an icon in your items, simply set the icon attribute with the identifier of your desired icon in your data.

As default, the icon template is set to: <i class='{icon}'></i> where {icon} serves as a placeholder that will be replaced by the value of the icon attribute.

<!-- Contextmenu element with icons --> <jtb-contextmenu data='[[{"content":"Item home", "icon":"jtbi-l-home"}, {"content":"Item heart", "icon":"jtbi-l-heart"}]]'></jtb-contextmenu>
/*----- Create element -----*/ var myElement = document.createElement('jtb-contextmenu'); /*----- Add items with icons -----*/ myElement.data = [ { 'content': 'Item home' 'icon': 'jtbi-l-home' }, { 'content': 'Item heart' 'icon': 'jtbi-l-heart' } ];

Instead of using the default template, you can also specify your own custom template to generate icons exactly the way you want. Simply define your desired structure using the icon_template attribute in your data elements, where {icon} will be replaced by the value of the icon attribute.

<!-- Contextmenu element with customized icon templates --> <jtb-contextmenu data='[[{&quot;content&quot;: &quot;Item home&quot;, &quot;icon_template&quot;: &quot;&lt;svg class=&#039;jtbi&#039;&gt;&lt;use xlink:href=&#039;{icon}&#039; weight=&#039;400&#039;&gt;&lt;/use&gt;&lt;/svg&gt;&quot;, &quot;icon&quot;: &quot;images/jtbicons/svg-sprites/linear.svg#home&quot;}, {&quot;content&quot;: &quot;Item heart&quot;, &quot;icon_template&quot;: &quot;&lt;svg class=&#039;jtbi&#039; weight=&#039;400&#039;&gt;&lt;use xlink:href=&#039;{icon}&#039;&gt;&lt;/use&gt;&lt;/svg&gt;&quot;, &quot;icon&quot;: &quot;images/jtbicons/svg-sprites/linear.svg#heart&quot;}, {&quot;content&quot;: &quot;Item with no icon&quot;}]]'></jtb-contextmenu>
/*----- Create element -----*/ var myElement = document.createElement('jtb-contextmenu'); /*----- Add items with customized icon templates -----*/ myElement.data = [ [ { "content": "Item home", "icon_template": "<svg class='jtbi'><use xlink:href='{icon}' weight='400'></use></svg>", "icon": "images/jtbicons/svg-sprites/linear.svg#home" }, { "content": "Item heart", "icon_template": "<svg class='jtbi'><use xlink:href='{icon}' weight='400'></use></svg>", "icon": "images/jtbicons/svg-sprites/linear.svg#heart" }, { "content": "Item with no icon" } ] ];
action

To specify an action for an item to trigger on click, simply add your desired action to the action attribute.

<!-- Contextmenu item with action --> <jtb-contextmenu id="dd-5" data='[[{"content": "Click me!", "action": "alert(\"Item clicked!\")"}]]'></jtb-contextmenu>
/*----- Create element -----*/ var myElement = document.createElement('jtb-contextmenu'); /*----- Define item with action -----*/ myElement.data = [ [ { 'content' : 'Click me', 'action' : () => { alert('Item clicked!'); } } ] ];

Style and appearance

To simplify your workflow, we've created some pre-defined attributes for JTB-Contextmenu elements that enable you to customize their style and appearance with ease.

shape

To change the shape of the container, use the shape attribute with your desired value.

Available options are: default | rect.

<!-- default shape --> <jtb-contextmenu shape='default'></jtb-contextmenu> <!-- rect shape --> <jtb-contextmenu shape='rect'></jtb-contextmenu>
/*----- Create element -----*/ var myElement = document.createElement('jtb-contextmenu'); /*----- Adjust shape -----*/ myElement.shape = 'default'; // Set shape = default myElement.shape = 'rect'; // Set shape = rect

Listeners & Callbacks

JTB Contextmenus are components built upon the jtbComponent element. As a result, they inherit all global listeners and callbacks, ensuring consistent event handling. For a detailed overview, refer to the Base component - Core page.

Methods

Similar to listeners and callbacks, JTB Contextmenus also inherit all methods from the base component, enabling seamless functionality. For a complete list of available methods, visit the Base component - Core page.

API

While each property on its own brings unique changes to the elements, combining them can help you create the perfect one.

For making it easier to navigate through all the attributes, we’ve created a comprehensive table for you. Below, you can find a list of all and their uses.

Copyright © 2025 JTBLabs - All rights reserved.