New to Kendo UI for jQuery? Download free 30-day trial

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>
          <li class="item1" onclick="item1click();">Item 1</li>
          <li class="item2" onclick="item2click();">Item 2</li>
          <li class="item3" onclick="item3click();">Item 3</li>
      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() {

      $(document).ready(function () {
          openOnClick: true
      html {
        font:12px sans-serif;

      #myMenu {
        display: inline-block;

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

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

See Also

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

In this article
Not finding the help you need? Improve this article