Split-style button for "New" custom element

Question

I've got a plugin with a custom element. It evolved based on the basics laid out in the P&T Events sample plugin.

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:

This is the result generated by the code in the Events example.

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

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?

Answer 1

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

<div class="btngroup submit">
  <a class="btn submit" href="#">Button One</a>
  <a class="btn submit" href="#">Button Two</a>
</div>

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.

<div class="btngroup submit">
  <a class="btn submit" href="#">Button One</a>
  <div class="btn menubtn submit" href="#">Menu Button</div>
  <div class="menu">
    <ul>
      <li><a href="#">Option One</a></li>
      <li><a href="#">Option Two</a></li>
    </ul>
  </div>
</div>

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();