Create Split Button

The example below demonstrates how to create a Split button using Kendo UI Menu.

    <ul id="myMenu">
      <li onclick="defaultitemclick();" class="defaultItem" data-action="1">action 1</li>
      <li class="emptyItem"><span class="empty">&nbsp;</span>
        <ul>
          <li class="item1" onclick="item1click();">Item 1</li>
          <li class="item2" onclick="item2click();">Item 2</li>
          <li class="item3" onclick="item3click();">Item 3</li>
        </ul>
      </li>
    </ul>
    <script>
      function item1click() {
        $(".defaultItem").data("action", "1").children(".k-link").text("action 1");
      }

      function item2click() {
        $(".defaultItem").data("action", "2").children(".k-link").text("action 2");
      }

      function item3click() {
        $(".defaultItem").data("action", "3").children(".k-link").text("action 3");
      }

      function defaultitemclick() {
        alert($(".defaultItem").data("action"));
      }

      $(document).ready(function () {
        $("#myMenu").kendoMenu({
          openOnClick: true
        });
      });
    </script>
    <style>
      html {
        font:12px sans-serif;
      }

      #myMenu {
        display: inline-block;
      }

      #myMenu .emptyItem {
        border-right-width: 0;
      }

      #myMenu .emptyItem > .k-link {
        padding-left: 0 !important;
      }
    </style>

See Also

• Menu JavaScript API Reference
• How to Execute Custom Click Actions Based on Class Name
• How to Use FontAwesome Icons

For more runnable examples on the Kendo UI Menu, browse the How To documentation folder.