diff --git a/Menus/.gitignore b/Context Menus/.gitignore
similarity index 100%
rename from Menus/.gitignore
rename to Context Menus/.gitignore
diff --git a/Menus/README.md b/Context Menus/README.md
similarity index 100%
rename from Menus/README.md
rename to Context Menus/README.md
diff --git a/Context Menus/css/style.sass b/Context Menus/css/style.sass
new file mode 100644
index 0000000..f2af94d
--- /dev/null
+++ b/Context Menus/css/style.sass	
@@ -0,0 +1,376 @@
+$red: rgb(182, 100, 103)
+$orange: rgb(206, 170, 111)
+$yellow: rgb(217, 188, 140)
+$green: rgb(140, 151, 125)
+$blue: rgb(141, 163, 185)
+$purple: rgb(169, 136, 176)
+
+$fg100: rgb(248,248,250)
+$fg200: rgb(225,227,233)
+$fg300: rgb(203,205,216)
+$fg400: rgb(180,184,200)
+$fg500: rgb(146,150,169)
+$fg600: rgb(78,83,106)
+
+$bg100: rgb(61,66,83)
+$bg200: rgb(50,54,68)
+$bg300: rgb(42,45,57)
+$bg400: rgb(37,39,50)
+$bg500: rgb(32,35,44)
+$bg600: rgb(28,30,38)
+
+$primary: $blue
+$success: $green
+$warning: $orange
+$critical: $red
+
+*
+    box-sizing: border-box
+
+html
+    margin: 0
+    padding: 0.5rem
+
+    height: 100vh
+    
+    font-size: 16px
+    font-family: 'Roboto', sans-serif
+    font-weight: 400
+
+    color: $fg100
+    background-color: $bg500
+
+body
+    margin: 0
+    padding: 0
+
+    width: 100%
+    height: 100%
+
+    display: grid
+    grid-template-columns: 20rem 1fr
+    grid-template-rows: 1fr
+    grid-template-areas: "sidebar content"
+
+    border: 1px solid $bg200
+    border-radius: 6px
+
+    overflow: hidden
+
+    > button
+        margin: 0
+        padding: 0.5rem 1rem
+
+        width: auto
+        height: 3rem
+
+        display: flex
+        justify-content: center
+        align-items: center
+
+        color: $fg100
+        background-color: $bg300
+        border: 1px solid $bg200
+        border-radius: 3px
+
+        cursor: pointer
+        
+        transition: all 0.2s ease-in-out
+
+        &:hover
+            background-color: $bg200
+
+nav
+    margin: 0
+    padding: 0.5rem
+
+    width: 100%
+    height: 100%
+    
+    grid-area: sidebar
+
+    display: flex
+    flex-direction: column
+    justify-content: flex-start
+    align-items: flex-start
+    gap: 0.5rem
+
+    border-right: 1px solid $bg200
+
+    > button
+        margin: 0
+        padding: 0.5rem
+
+        width: 100%
+        height: auto
+
+        display: flex
+        justify-content: flex-start
+        align-items: center
+
+        color: $fg400
+        background-color: transparent
+        border: none
+        border-radius: 3px
+
+        cursor: pointer
+        
+        transition: all 0.2s ease-in-out
+
+        &:hover
+            background-color: $bg400
+    
+    > hr
+        margin: 0 auto
+        padding: 0
+
+        width: 100%
+        height: 1px
+
+        border: none
+        background-color: $bg200
+
+main
+    margin: 0
+    padding: 0.5rem
+
+    width: 100%
+    height: 100%
+
+    grid-area: content
+
+    display: flex
+    flex-direction: column
+    justify-content: flex-start
+    align-items: flex-start
+    gap: 0.5rem
+
+    > button
+        margin: 0
+        padding: 0.5rem 1rem
+
+        width: auto
+        height: 3rem
+
+        display: flex
+        justify-content: center
+        align-items: center
+
+        color: $fg100
+        background-color: $bg300
+        border: 1px solid $bg200
+        border-radius: 3px
+
+        cursor: pointer
+        
+        transition: all 0.2s ease-in-out
+
+        &:hover
+            background-color: $bg200
+
+.code-block
+    margin: 0
+    padding: 0
+
+    width: 100%
+    height: auto
+
+    border: 1px solid $bg200
+    border-radius: 6px
+
+    color: $fg100
+    background-color: $bg600
+
+    overflow: hidden
+
+    pre
+        margin: 0
+        padding: 0.5rem
+
+        white-space: pre-wrap
+
+        display: block
+
+        font-size: 0.8rem
+        font-weight: 400
+
+.code-header
+    margin: 0
+    padding: 0.3rem 0.3rem 0.3rem 0.8rem
+
+    width: 100%
+    height: auto
+
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    align-items: center
+
+    background-color: $bg500
+    border-bottom: 1px solid $bg200
+
+    p
+        margin: 0
+        padding: 0
+
+        width: auto
+        height: auto
+
+        font-size: 1rem
+        font-weight: 400
+        color: $fg400
+
+    button
+        margin: 0
+        padding: 0.25rem 0.5rem
+
+        display: flex
+        justify-content: center
+        align-items: center
+
+        color: $fg100
+        background-color: $bg500
+        border: none
+        border-radius: 3px
+
+        cursor: pointer
+
+        &:hover
+            background-color: $bg200
+
+.contextMenuClose
+    width: 100vw
+    height: 100vh
+
+    position: fixed
+    top: 0
+    left: 0
+
+    background-color: transparent
+    z-index: 99998
+
+.contextMenu
+    margin: 0
+    padding: 0.25rem
+
+    width: calc( 100vw - 10px )
+    height: auto
+    max-width: 300px
+
+    position: absolute
+
+    display: flex
+    flex-direction: column
+    justify-content: flex-start
+    align-items: flex-start
+    gap: 0.25rem
+
+    background-color: $bg300
+    border: 1px solid $bg200
+    border-radius: 6px
+
+    overflow: hidden
+
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
+    transform-origin: center center
+    opacity: 0.5
+    transform: scale(0, 0)
+    z-index: 99999
+
+.contextMenuTitle
+    margin: 0
+    padding: 0.25rem 0.5rem
+
+    width: 100%
+
+    text-align: center
+    font-size: 1.2rem
+    font-weight: 400
+    color: $fg300
+
+.contextMenuItem
+    margin: 0
+    padding: 0.5rem
+
+    width: 100%
+    height: auto
+
+    display: flex
+    flex-direction: row
+    justify-content: flex-start
+    align-items: center
+    gap: 0.5rem
+
+    background-color: $bg300
+    color: $fg300
+    border: none
+    border-radius: 3px
+
+    cursor: pointer
+.contextMenuItem:hover
+    background-color: $bg200
+.contextMenuItem__critical
+    color: $critical
+//.contextMenuItem__critical:hover
+//    background-color: rgba($critical, 0.1)
+.contextMenuItem__warning
+    color: $warning
+//.contextMenuItem__warning:hover
+//    background-color: rgba($warning, 0.1)
+.contextMenuItem__success
+    color: $success
+//.contextMenuItem__success:hover
+//    background-color: rgba($success, 0.1)
+.contextMenuItem__info
+    color: $primary
+//.contextMenuItem__info:hover
+//    background-color: rgba($primary, 0.1)
+
+.contextMenuText
+    margin: 0
+    padding: 0
+
+    font-size: 1rem
+    font-weight: 400
+
+.contextMenuIcon
+    margin: 0
+    padding: 0
+
+    width: 1.25rem
+    height: 1.25rem
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+.contextMenuDivider
+    margin: 0 auto
+    padding: 0
+
+    width: 100%
+    height: 1px
+
+    border: none
+    background-color: $bg200
+
+.contextMenu__show
+    opacity: 1
+    transform: scale(1, 1)
+
+.contextMenu__show--mouse
+    opacity: 1
+    transform: scale(1, 1)
+    transform-origin: top left
+.contextMenu__show--button
+    opacity: 1
+    transform: scale(1, 1)
+    transform-origin: top center
+.contextMenu__show--center
+    opacity: 1
+    transform: scale(1, 1)
+    transform-origin: center center
+
+.contextMenu__hide
+    opacity: 0
+    transform: scale(0, 0)
\ No newline at end of file
diff --git a/Context Menus/index.html b/Context Menus/index.html
new file mode 100644
index 0000000..a614ba6
--- /dev/null
+++ b/Context Menus/index.html	
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JS menus</title>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/main.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/contextMenu.js"></script>
+</head>
+
+<body>
+    <nav>
+        <button>Context Menus</button>
+        <button>Dropdowns</button>
+        <button>Modals</button>
+        <hr>
+        <button>Code blocks</button>
+    </nav>
+    <main>
+        <button onclick="contextAtMouse(this)">Mouse</button>
+        <button onclick="contextAtButton(this)">Button</button>
+        <button onclick="contextAtCenter(this)">Center</button>
+        <button onclick="contextImageAction(this)">Image actions</button>
+
+        <div class="code-block">
+            <div class="code-header">
+                <p>Json</p>
+                <button>Copy</button>
+            </div>
+            <pre>
+{
+    'value': 'Edit',
+    'icon': edit,
+    'function': dissmissContextMenu,
+    'type': 'critical'
+},
+{
+    'value': 'Copy',
+    'icon': copy,
+    'function': copyToClipboard,
+    'type': 'normal'
+},
+            </pre>
+        </div>
+    </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/Menus/js/main.js b/Context Menus/js/contextMenu.js
similarity index 75%
rename from Menus/js/main.js
rename to Context Menus/js/contextMenu.js
index 22f3b7e..15b215f 100644
--- a/Menus/js/main.js
+++ b/Context Menus/js/contextMenu.js	
@@ -9,7 +9,7 @@
         type        - Type of menu item (critical, warning, success, info)
 */
 
-function showContextMenu(obj, menu) {
+function showContextMenu(obj, menu, position='mouse') {
     // If the context menu is already open, close it first
     if (document.querySelector(".contextMenu")) {
         dissmissContextMenu();
@@ -85,28 +85,43 @@ function showContextMenu(obj, menu) {
     document.body.appendChild(contextMenu);
     document.body.appendChild(closeSpan);
 
-    // Get position of the item clicked or the mouse
-    try {
+    if (position == 'mouse') {
+        var posX = event.clientX + 5;
+        var posY = event.clientY + 5;
+    } else if (position == 'button') {
+        var posX = obj.offsetLeft + (obj.offsetWidth / 2) - (contextMenu.offsetWidth / 2);
+        var posY = obj.offsetTop + obj.offsetHeight + 5;
+    } else if (position == 'center') {
+        var posX = (window.innerWidth / 2) - (contextMenu.offsetWidth / 2);
+        var posY = (window.innerHeight / 2) - (contextMenu.offsetHeight / 2);
+    } else {
         var posX = event.clientX + 5;
         var posY = event.clientY + 5;
-    } catch (error) {
-        var posX = obj.offsetLeft + (bj.offsetWidth * 0.6) + 2;
-        var posY = obj.offsetTop + obj.offsetHeight + 2
     }
-
+    
     // Move the context menu if it is off the screen
     if (posX + contextMenu.offsetWidth > window.innerWidth) {
         posX = window.innerWidth - (contextMenu.offsetWidth + 5);
+    } else if (posX < 0) {
+        posX = 5;
     }
-    if (posY + contextMenu.offsetHeight > window.innerHeight) {
-        posY = window.innerHeight - (contextMenu.offsetHeight + 5);
+    if (posY < 0) {
+        posY = 5;
     }
-
     contextMenu.style.left = posX + "px";
     contextMenu.style.top = posY + "px";
 
+    // Timeout otherwise animation doesn't work
     setTimeout(function() {
-        contextMenu.classList.add("contextMenu__show");
+        if (position == 'mouse') {
+            contextMenu.classList.add("contextMenu__show--mouse");
+        } else if (position == 'button') {
+            contextMenu.classList.add("contextMenu__show--button");
+        } else if (position == 'center') {
+            contextMenu.classList.add("contextMenu__show--center");
+        } else {
+            contextMenu.classList.add("contextMenu__show");
+        }
     }, 1);
 }
 
@@ -127,4 +142,11 @@ function dissmissContextMenu() {
             menu.remove();
         }, 500);
     });
-}
\ No newline at end of file
+}
+
+window.addEventListener("resize", function() {
+    // If the context menu is already open, close it first
+    if (document.querySelector(".contextMenu")) {
+        dissmissContextMenu();
+    }
+});
\ No newline at end of file
diff --git a/Context Menus/js/examples.js b/Context Menus/js/examples.js
new file mode 100644
index 0000000..1693f68
--- /dev/null
+++ b/Context Menus/js/examples.js	
@@ -0,0 +1,122 @@
+function contextAtMouse(obj) {
+    showContextMenu(obj, [
+        {
+            'value': 'gwagwa',
+            'function': dissmissContextMenu
+        },
+        {
+            'value': 'gwagwa',
+            'function': dissmissContextMenu
+        }
+    ])
+}
+function contextAtButton(obj) {
+    showContextMenu(obj, [
+        {
+            'value': 'gwagwa',
+            'function': dissmissContextMenu
+        },
+        {
+            'value': 'gwagwa',
+            'function': dissmissContextMenu
+        }
+    ], 'button')
+}
+function contextAtCenter(obj) {
+    showContextMenu(obj, [
+        {
+            'value': 'gwagwa',
+            'function': dissmissContextMenu
+        },
+        {
+            'value': 'gwagwa',
+            'function': dissmissContextMenu
+        }
+    ], 'center')
+}
+
+function contextImageAction(obj) {
+    showContextMenu(obj, [
+        {
+            'value': 'title',
+            'text': 'Image actions',
+        },
+        {
+            'value': 'Copy Link',
+            'icon': link,
+            'function': dissmissContextMenu
+        },
+        {
+            'value': 'Download',
+            'icon': download,
+            'function': dissmissContextMenu
+        },
+        {
+            'value': 'divider',
+        },
+        {
+            'value': 'Edit',
+            'icon': edit,
+            'function': dissmissContextMenu,
+            'type': 'critical'
+        },
+        {
+            'value': 'Delete',
+            'icon': trash,
+            'function': dissmissContextMenu,
+            'type': 'critical'
+        },
+        {
+            'value': 'divider',
+        },
+        {
+            'value': 'Edit',
+            'icon': edit,
+            'function': dissmissContextMenu,
+            'type': 'warning'
+        },
+        {
+            'value': 'Delete',
+            'icon': trash,
+            'function': dissmissContextMenu,
+            'type': 'warning'
+        },
+        {
+            'value': 'divider',
+        },
+        {
+            'value': 'Edit',
+            'icon': edit,
+            'function': dissmissContextMenu,
+            'type': 'success'
+        },
+        {
+            'value': 'Delete',
+            'icon': trash,
+            'function': dissmissContextMenu,
+            'type': 'success'
+        },
+        {
+            'value': 'divider',
+        },
+        {
+            'value': 'Edit',
+            'icon': edit,
+            'function': dissmissContextMenu,
+            'type': 'info'
+        },
+        {
+            'value': 'Delete',
+            'icon': trash,
+            'function': dissmissContextMenu,
+            'type': 'info'
+        },
+        {
+            'value': 'divider',
+        },
+        {
+            'value': 'gwagwa',
+            'function': dissmissContextMenu
+        }
+    ])
+};
\ No newline at end of file
diff --git a/Context Menus/js/main.js b/Context Menus/js/main.js
new file mode 100644
index 0000000..50b60aa
--- /dev/null
+++ b/Context Menus/js/main.js	
@@ -0,0 +1,14 @@
+// Icons
+var link = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor"><path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path></svg>'
+var download = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor"><path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path></svg>';
+var edit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor"><path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path></svg>';
+var trash = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor"><path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path></svg>';
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('pre').forEach((block) => {
+        var code = block.innerHTML;
+        code = code.substring(0, code.lastIndexOf('\n'));
+        block.innerHTML = code;
+    });
+});
\ No newline at end of file
diff --git a/Menus/css/style.sass b/Menus/css/style.sass
deleted file mode 100644
index b8e845f..0000000
--- a/Menus/css/style.sass
+++ /dev/null
@@ -1,182 +0,0 @@
-$primary: rgb(66, 130, 167)
-$success: rgb(95, 175, 99)
-$warning: rgb(236, 136, 77)
-$critical: rgb(247, 111, 111)
-
-$fg100: rgb(248,248,250)
-$fg200: rgb(225,227,233)
-$fg300: rgb(203,205,216)
-$fg400: rgb(180,184,200)
-$fg500: rgb(146,150,169)
-$fg600: rgb(78,83,106)
-
-$bg100: rgb(61,66,83)
-$bg200: rgb(50,54,68)
-$bg300: rgb(42,45,57)
-$bg400: rgb(37,39,50)
-$bg500: rgb(32,35,44)
-$bg600: rgb(28,30,38)
-
-*
-    box-sizing: border-box
-
-html
-    font-size: 16px
-    font-family: 'Roboto', sans-serif
-    font-weight: 400
-    color: $fg100
-    background-color: $bg500
-
-body
-    display: flex
-    flex-direction: row
-    justify-content: center
-    align-items: center
-    gap: 1rem
-
-    > button
-        margin: 0
-        padding: 0.5rem 1rem
-
-        width: auto
-        height: 3rem
-
-        display: flex
-        justify-content: center
-        align-items: center
-
-        color: $fg100
-        background-color: $bg300
-        border: 1px solid $bg200
-        border-radius: 3px
-
-        cursor: pointer
-        
-        transition: all 0.2s ease-in-out
-        
-        &:hover
-            background-color: $bg200
-
-.contextMenuClose
-    width: 100vw
-    height: 100vh
-
-    position: fixed
-    top: 0
-    left: 0
-
-    background-color: transparent
-    z-index: 99998
-
-.contextMenu
-    margin: 0
-    padding: 0.25rem
-
-    width: calc( 100vw - 10px )
-    height: auto
-    max-width: 300px
-
-    position: absolute
-
-    display: flex
-    flex-direction: column
-    justify-content: flex-start
-    align-items: flex-start
-    gap: 0.25rem
-
-    background-color: $bg300
-    border: 1px solid $bg200
-    border-radius: 6px
-
-    overflow: hidden
-
-    transition: all 0.2s ease-in-out
-    transform-origin: top left
-    opacity: 0
-    transform: scale(0, 0)
-    z-index: 99999
-
-.contextMenuTitle
-    margin: 0
-    padding: 0.25rem 0.5rem
-
-    width: 100%
-
-    text-align: center
-    font-size: 1.2rem
-    font-weight: 400
-    color: $fg300
-
-.contextMenuItem
-    margin: 0
-    padding: 0.25rem
-
-    width: 100%
-    height: auto
-
-    display: flex
-    flex-direction: row
-    justify-content: flex-start
-    align-items: center
-    gap: 0.5rem
-
-    background-color: $bg300
-    color: $fg300
-    border: none
-    border-radius: 3px
-
-    cursor: pointer
-.contextMenuItem:hover
-    background-color: $bg200
-.contextMenuItem__critical
-    color: $critical
-//.contextMenuItem__critical:hover
-//    background-color: rgba($critical, 0.1)
-.contextMenuItem__warning
-    color: $warning
-//.contextMenuItem__warning:hover
-//    background-color: rgba($warning, 0.1)
-.contextMenuItem__success
-    color: $success
-//.contextMenuItem__success:hover
-//    background-color: rgba($success, 0.1)
-.contextMenuItem__info
-    color: $primary
-//.contextMenuItem__info:hover
-//    background-color: rgba($primary, 0.1)
-
-.contextMenuText
-    margin: 0
-    padding: 0
-
-    font-size: 1rem
-    font-weight: 400
-
-.contextMenuIcon
-    margin: 0
-    padding: 0
-
-    width: 1.25rem
-    height: 1.25rem
-
-    display: flex
-    justify-content: center
-    align-items: center
-
-.contextMenuDivider
-    margin: 0 auto
-    padding: 0
-
-    width: 90%
-    height: 1px
-
-    border: none
-    background-color: $bg200
-
-.contextMenu__show
-    opacity: 1
-    transform: scale(1, 1)
-
-.contextMenu__hide
-    opacity: 0
-    transform: scale(0, 0)
\ No newline at end of file
diff --git a/Menus/index.html b/Menus/index.html
deleted file mode 100644
index 7ac24b3..0000000
--- a/Menus/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>JS menus</title>
-    <link rel="stylesheet" href="css/style.css">
-    <script src="js/main.js"></script>
-</head>
-<body>
-    <button onclick="showContextMenu(this, [{'value': 'gwagwa', 'function': dissmissContextMenu},{'value': 'gwagwa', 'function': dissmissContextMenu}])">Show menu</button>
-    <button onclick="imageActions(this)">Image actions</button>
-</body>
-</html>
-
-<script>
-    function imageActions(obj) {
-        var link = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor"><path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path></svg>'
-        var download = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor"><path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path></svg>';
-        var edit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor"><path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path></svg>';
-        var trash = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor"><path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path></svg>';
-
-        showContextMenu(obj, [
-            {
-                'value': 'title',
-                'text': 'Image actions',
-            },
-            {
-                'value': 'Copy Link',
-                'icon': link,
-                'function': dissmissContextMenu
-            },
-            {
-                'value': 'Download',
-                'icon': download,
-                'function': dissmissContextMenu
-            },
-            {
-                'value': 'divider',
-            },
-            {
-                'value': 'Edit',
-                'icon': edit,
-                'function': dissmissContextMenu,
-                'type': 'critical'
-            },
-            {
-                'value': 'Delete',
-                'icon': trash,
-                'function': dissmissContextMenu,
-                'type': 'critical'
-            },
-            {
-                'value': 'divider',
-            },
-            {
-                'value': 'Edit',
-                'icon': edit,
-                'function': dissmissContextMenu,
-                'type': 'warning'
-            },
-            {
-                'value': 'Delete',
-                'icon': trash,
-                'function': dissmissContextMenu,
-                'type': 'warning'
-            },
-            {
-                'value': 'divider',
-            },
-            {
-                'value': 'Edit',
-                'icon': edit,
-                'function': dissmissContextMenu,
-                'type': 'success'
-            },
-            {
-                'value': 'Delete',
-                'icon': trash,
-                'function': dissmissContextMenu,
-                'type': 'success'
-            },
-            {
-                'value': 'divider',
-            },
-            {
-                'value': 'Edit',
-                'icon': edit,
-                'function': dissmissContextMenu,
-                'type': 'info'
-            },
-            {
-                'value': 'Delete',
-                'icon': trash,
-                'function': dissmissContextMenu,
-                'type': 'info'
-            },
-            {
-                'value': 'divider',
-            },
-            {
-                'value': 'gwagwa',
-                'function': dissmissContextMenu
-            }
-        ],
-        )
-    };
-
-</script>
\ No newline at end of file