SplitDropButton is a simple and easily styleable, split button dropdown jQuery plugin similar to those you can find on Twitter Boostrap or Zurb Foundation.

You can find the code on Github and a no frills demo here.

Raison d’être

The split drop down button isn’t a novel widget concept, so why re-invent the wheel? As a theoretical wise man once said, the space between between Photoshop and the screen is a fountain of invention.Google didn’t reveal any good standalone implementations that fit the bill, and both the Bootstrap and Foundation versions weren’t easily styleable. Besides,I didn’t want to include big chuncks of either framework just for a simple widget.jQuery.SplitDropButton only takes one option: the text or html content for the toggle div. In the above example, I used Font-Awesome for both the links and the toggle div and applied some custom color, sizing and padding css. But enough words, let’s get to the code.

HTML

<div class="split-btn"><a href="#">Primary Link</a><a href="#">Secondary Link</a><a href="#">Secondary Link</a><a href="#">Secondary Link</a></div>

JavaScript

$(document).ready(function(){  $('.split-btn').splitdropbutton({    toggleDivContent: '<i class="icon-reorder"></i>' // optional html content for the clickable toggle div  })});Caveat: Since this plugin calculates element widths on page load, if you are using font-face (for example,Font-Awesome) or images within your links, you should use $(window).load() instead of$(document).ready().See thisStack Overflow answer for why.

Generated HTML

<div class="split-btn"><div class="spb-toggle"><i class="icon-reorder"></i></div><div class="spb-primary"><a href="#">Primary Link</a></div><div class="spb-secondary"><a href="#">Secondary Link</a><a href="#">Secondary Link</a><a href="#">Secondary Link</a></div></div>

Stylesheet

.split-btn .spb-toggle {  font-size: 24px;  padding: 7px 9px;  background: #ccc;  color: black;}// it's important to style the links with .split-btn a instead of '.spb-primary a' or// '.spb-secondary a' because those divs have widths based on the length of '.split-btn a'.split-btn a {  padding:  10px;  background: black;  color: white;}.split-btn a:hover {  background: white;  color: black;}It’s important to style the links with ‘.split-btn a’ instead of ‘.spb-primary a’ or ‘.spb-secondary a’ because those divs have widths based on the length of ‘.split-btn a’.If you have any comments, issues or feature requests, please post under issues on Github. Otherwise, enjoy!Smashing Boxes is a web and mobile app development company know for creating a lasting experience through bold design and disrupting the status quo. We are entrepreneurs and craftsmen first, and a digital creative agency second. Inspired by our visionary clients, we transform ideas into innovative web and mobile applications. Take a look at our work.