SVG Triangle Indicator For Active Menus - jQuery triangle-menu

SVG Triangle Indicator For Active Menus - jQuery triangle-menu
File Size: 11.7 KB
Views Total: 800
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

triangle-menu is a jQuery plugin that adds an SVG based triangle indicator to active menu items using the Clip Path Polygon plugin.

How to use it:

1. Create a normal navigation menu using any elements such as table, unordered list, DIV, etc.

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

2. Load the jQuery triangle-menu plugin and other required JavaScript files in the document.

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

3. Get the current menu item you selected using the activate callback.

<span class="selected-text">Selected: 1</span>
  activate: function(e, index) {
    $('.selected-text').html('Selected: ' + index);

4. Customize the triangle indicator with the following settings.


  // triangle size in pixels
  triangleWidth: 50,
  triangleHeight: 20,

  // item selector
  menuItemSelector: '.menu-item'

This awesome jQuery plugin is developed by andrusieczko. For more Advanced Usages, please check the demo page or visit the official website.