The Split Button Dropdown

5.31.13
Design

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.

SUBSCRIBE TO SMASHING BOXES BLOG UPDATES.

Follow Smashing Boxes on TWITTER, LINKEDIN, and FACEBOOK.

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

From Artificial Intelligence and implicit bias to vocal interface design, here are key takeaways and insights from the 2019 UX Y’all Conference.
8.10.19

6 Insights on Innovation from UX Y'all 2019

Design

From Artificial Intelligence and implicit bias to vocal interface design, here are key takeaways and insights from the 2019 UX Y’all Conference.

Last week our talented designer, Bonnie Cook led a seminar on UX for Machine Learning as part of our Next Matters Most series
4.12.18

UX for Machine Learning

Design

Last week our talented designer, Bonnie Cook led a seminar on UX for Machine Learning as part of our Next Matters Most series

One of the biggest pressures we face as UX designers is speed.
28.9.18

Empathy, huh, yeah! What is it good for? Absolutely everything.

Design

One of the biggest pressures we face as UX designers is speed.

Let's Make
Something
Together

Featured on

top mobile app development company

L
E
T'
S

C
H
A
T