<p>Those split-style buttons are just multiple regular buttons (<code>.btn</code>) next to each other, wrapped in a <code>.btngroup</code> div:</p>



<pre class="lang-html prettyprint-override"><code>&lt;div class="btngroup submit"&gt;
  &lt;a class="btn submit" href="#"&gt;Button One&lt;/a&gt;
  &lt;a class="btn submit" href="#"&gt;Button Two&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>If you want to make one of your buttons trigger a dropdown menu, give it the class <code>.menubtn</code>, and add your <code>.menu</code> div right after it.</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="btngroup submit"&gt;
  &lt;a class="btn submit" href="#"&gt;Button One&lt;/a&gt;
  &lt;div class="btn menubtn submit" href="#"&gt;Menu Button&lt;/div&gt;
  &lt;div class="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Option One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Option Two&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>As long as this HTML is in the page’s initial HTML, Craft will automatically initialize the menu. If you’re adding it in JavaScript later on, you will need to initialize the menu yourself, by calling the <code>menubtn()</code> jQuery function on it:</p>

<pre class="lang-js prettyprint-override"><code>$('#mycontainer .menubtn').menubtn();
</code></pre>

CC BY-SA 3.0
2015-08-06T07:51:01.297Z
Thanks Brandon, this worked beautifully! I've got a follow-up question, but it was big enough to pose as [a separate question...](http://craftcms.stackexchange.com/q/10868/45)
Lindsey D
CC BY-SA 3.0
2015-08-04T17:26:41.700Z
2015-08-04T17:26:41.700Z
Brandon Kelly
<p>I've got a plugin with a custom element. It evolved based on the basics laid out in the <a href="https://github.com/pixelandtonic/Events" rel="nofollow noreferrer">P&amp;T Events sample plugin</a>.</p>

<p>On my element's index page, there's a big button to create a "New Element". When you click on it, you see a dropdown list of every available group for the new element:</p>

<p><a href="https://i.sstatic.net/wsaqe.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/wsaqe.png" alt="Current button format"></a></p>

<p>This is the result generated by <a href="https://github.com/pixelandtonic/Events/blob/master/events/templates/_index.html" rel="nofollow noreferrer">the code in the Events example</a>.</p>

<p>However, I really want a <strong>split button format</strong>, like Craft provides for its entries:</p>

<p><a href="https://i.sstatic.net/VLeAB.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/VLeAB.png" alt="Desired button format"></a></p>

<p>The advantage there would be the "one click" add, if you're already viewing the target group.</p>

<p>I've tried copy &amp; pasting various HTML from the <code>entries</code> template, but that doesn't really seem to be doing the trick. I suspect JS is playing a large role in generating that menu, but I haven't quite figured it out yet.</p>

<p><strong>How can I make a split-style button for my custom element?</strong></p>

<plugin-development><elementtype>
Split-style button for "New" custom element
# Split-style button for "New" custom element

(Asked by: username_0 on 2015-08-03)

I've got a plugin with a custom element. It evolved based on the basics laid out in the [P&T Events sample plugin](https://github.com/pixelandtonic/Events).

On my element's index page, there's a big button to create a "New Element". When you click on it, you see a dropdown list of every available group for the new element:

[![Current button format](https://i.sstatic.net/wsaqe.png)](https://i.sstatic.net/wsaqe.png)

This is the result generated by [the code in the Events example](https://github.com/pixelandtonic/Events/blob/master/events/templates/_index.html).

However, I really want a **split button format**, like Craft provides for its entries:

[![Desired button format](https://i.sstatic.net/VLeAB.png)](https://i.sstatic.net/VLeAB.png)

The advantage there would be the "one click" add, if you're already viewing the target group.

I've tried copy & pasting various HTML from the `entries` template, but that doesn't really seem to be doing the trick. I suspect JS is playing a large role in generating that menu, but I haven't quite figured it out yet.

**How can I make a split-style button for my custom element?**

**Tags:** plugin-development, elementtype

---

## 1 answers

### Answer by username_1 on 2015-08-04. Score: 4 | Accepted answer

Those split-style buttons are just multiple regular buttons (.btn) next to each other, wrapped in a .btngroup div:

  Button One
  Button Two


If you want to make one of your buttons trigger a dropdown menu, give it the class .menubtn, and add your .menu div right after it.

  Button One
  Menu Button
  
    
      Option One
      Option Two
    
  


As long as this HTML is in the page’s initial HTML, Craft will automatically initialize the menu. If you’re adding it in JavaScript later on, you will need to initialize the menu yourself, by calling the menubtn() jQuery function on it:
$('#mycontainer .menubtn').menubtn();

> **Comments:**
> **username_0**: Thanks Brandon, this worked beautifully! I've got a follow-up question, but it was big enough to pose as [a separate question...](http://craftcms.stackexchange.com/q/10868/45)  

---

