Bootstrap-style dropdowns with some added features and no dependencies.
Pull request Compare This branch is 85 commits behind claviska:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

jQuery Bootstrap-style Dropdowns

Copyright 2011 Cory LaViska for A Beautiful Site, LLC.

Inspired by Bootstrap

Dual licensed under the MIT or GPL Version 2 licenses



  • Include required files:
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />`
<script type="text/javascript" src="jquery.dropdown.js"></script>`
  • Create a dropdown and insert it before the closing body tag:
<div id="dropdown-1" class="dropdown-menu has-tip">
        <li><a href="#1">Item 1</a></li>
        <li><a href="#2">Item 2</a></li>
        <li><a href="#3">Item 3</a></li>
        <li class="divider"></li>
        <li><a href="#4">Item 4</a></li>
        <li><a href="#5">Item 5</a></li>
        <li><a href="#5">Item 6</a></li>
  • Add the data-dropdown attribute to any HTML element:
<a href="#" data-dropdown="#dropdown-1">dropdown</a>
  • There’s no need to initialize it! The plugin will handle everything from here.

Special Classes

  • To disable the dropdown, add the dropdown-disabled class to the trigger element
  • To offset positioning, add data-horizontal-offset="10" and/or data-vertical-offset="10" to the trigger element
  • To add a tip to the dropdown, add the has-tip class to the dropdown element
  • To make the dropdown anchor to the right, add the anchor-right class to the dropdown element: Example

Disabling content within a larger trigger

  • Suppose you enable the dropdown on a container (i.e. a table row). To disable the dropdown on items within the row, add the class dropdown-ignore to that element:
<tr data-dropdown="#dropdown-1">
  <td><a class="dropdown-ignore" href="">I won't trigger the dropdown</a></td>
  <td>I will trigger the dropdown</td>


You probably won’t need these, but they’re there just in case.

attach – attach a dropdown to the selected trigger element(s); pass in the #dropdown-id as value

detach – detach a dropdown from the selected trigger element(s)

enable – enables the dropdown and removes the dropdown-disabled class from the trigger

disable – disables the dropdown and adds the dropdown-disabled class to the trigger

hide – hide the dropdown

Example usage: $('#trigger').dropdown('method', [value]);