Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">
  
  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>
​
​
<vaadin-context-menu>
  <template>
    <style>
      .my-menu {
        padding: 8px 0;
        background: #fff;
      }
​
      .my-menu-item {
        display: block;
        padding: 8px 24px;
        text-decoration: none;
        color: #000;
      }
​
      .my-menu-item:hover {
        background: #eee;
      }
    </style>
    <div class="my-menu">
      <a href="#" class="my-menu-item">First menu item</a>
      <a href="#" class="my-menu-item">Second menu item</a>
    </div>
  </template>
​
  <p>
    This paragraph has a context menu built using basic HTML elements
    and global CSS styles.
  </p>
</vaadin-context-menu>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers