The Split Button Dropdown

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.


<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>


$(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>


.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.

Subscribe to the Smashing Boxes Blog today!

Smashing Boxes is a creative technology lab that partners with clients, taking an integrated approach to solving complex business problems. We fuse strategy, design, and engineering with a steady dose of entrepreneurial acumen and just the right amount of disruptive zeal. Simply put, no matter what we do, we strive to do it boldly. Let's talk today!

Related Posts

What a Strong Brand Means For a City

The nickname, Bull City, comes from the former brand of tobacco, Bull Durham Smoking Tobacco.

view post

You Can’t (Really) Innovate Without Discovery

Innovation begins with an idea. A spark of intuition based on an assumption - that there is a problem or that something could be better, and that we can solve it.

view post