Menu with split button

2 posts, 0 answers
  1. Charles Benoualid
    Charles  Benoualid avatar
    26 posts
    Member since:
    Sep 2009

    Posted 18 Apr 2013 Link to this post


    Is it possible to use the horizontal menu with split button instead of regular button to be touch friendly? So i can have a link for each item and a button to open the submenu. Maybe the tree view is better for this task?

    I find a way to do it for the first level of the menu with the markup below but i didn't find how to do it with the sub menus
    <style scoped>
         #menu > .k-item.empty-split {
            width: 16px;
        #menu > .k-item.empty-split > .k-link {
            padding-left: 0;
            padding-right: 0;
     <ul id="menu">
            <li class="empty-split">
                <span class="k-link">
                    <span class="k-icon k-i-arrow-s"></span>
                        <div id="template" style="padding: 10px;">
                            <h2>Around the Globe</h2>
                                <li>United States</li>
                            <img src="../../content/web/menu/map.png" alt="Stores Around the Globe" />
                            <button class="k-button">See full list</button>

    <script type="text/javascript">
            $(function () {
                    openOnClick: true
  2. Dimo
    Dimo avatar
    8318 posts

    Posted 19 Apr 2013 Link to this post

    Hello Charles,

    Generally, Menu items, which expand child items on hover and perform some action on click are not usable for mouse users either. There are users, which expect Menu subgroups to open on click, that's why they click with the mouse. Executing some script at this point, or navigating to another page may be undesirable.

    On the other hand, having a split button inside an expandable Menu item, will result in two dropdown arrow indicators, which in my opinion does not look good.

    In conclusion, since the desired behavior is not supported out of the box and its benefit is questionable, my recommendation is to redesign the user experience in this case. One option is to use a TreeView, as you have suggested, another one is to leave the Menu, but root items should only expand child items, not perform another action.

    On a side note, please avoid posting duplicate forum threads and support tickets, as this may lead to support overhead and makes tracking of your message history difficult. Thank you for understanding.

    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top