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

Create a Split Button in the Menu


Product Progress® Kendo UI® Menu for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I create a Split button in the Kendo UI for jQuery Menu?


The example below demonstrates how to achieve the desired scenario.

    <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 {
        width: fit-content;
      #myMenu .emptyItem {
        border-right-width: 0;
      #myMenu .emptyItem > .k-link {
        padding-left: 0 !important;

See Also

In this article