node package manager


triangle-menu Build Status

This is a jQuery plugin that creates a dynamic menu with a triangle pointer based on clip-path.




$ npm install triangle-menu --save

Then require it:


and use:



Download triangle-menu.min.js (minified) or menu-triangle.js (dev) and add it to you HTML file:

<script src="jquery.min.js"></script>
<script src="clip-path-polygon.min.js"></script>
<script src="triangle-menu.min.js"></script>

Remember about dependencies ( and clip-path-polygon)!


If you want to compile the whole package and run unit tests, type npm install and grunt.


Definition: triangleMenu(options) where options are not required.

You have to have a certain HTML structure to use it. All the items in the menu have to have .menu-item class.


Option Type Default Description
triangleHeight number 20 Height of the clipped triangle in px
triangleWidth number 25 Width of the clipped triangle in px
menuItemSelector string .menu-item Selector of the submenu item
activate(event, index) function nothing The callback function that is called when the mouse hovers over a .menu-item element; index argument is the index of .menu-item element and it's numerated from 1

Example use:

You can find the working examples here.

<table class="triangle-menu">
            <td class="menu-item">1</td>
            <td class="menu-item">2</td>
            <td class="menu-item">3</td>
            <td class="menu-item">4</td>

and in your javascript file:


you can add some css to see the effects:

.triangle-menu {
  height: 200px;
  width: 600px;
  background: green;
  text-align: center;

More examples

With Bootstrap2:

<div class="row-fluid triangle-menu">
    <div class="row4 my-menu-item">1</div>
    <div class="row4 my-menu-item">2</div>
    <div class="row4 my-menu-item">3</div>

Using options:

  triangleWidth: 10,
  triangleheight: 5,
  menuItemSelector: '.my-menu-item',
  activate: function(event, index) {
    console.log("You hovered over ", index, " element");