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

Add a Menu to the AppBar Component

Environment

Product Progress® Kendo UI® AppBar for jQuery Progress® Kendo UI® Menu for jQuery
Product Version Created with the 2020.3.1118 version

Description

How can I add a Menu to AppBar and set the overflow?

Solution

To achieve the desired scenario:

  1. Implement the Menu in the AppBar.
  2. Set the overflow style of the AppBar to visible.
 <div id="appbar"></div>
    <script id="menu-template" type="text/x-kendo-tmpl">
        <ul id="menu" data-role="menu">
            <li>
                Products
                <ul>
                    <li>
                        Furniture
                        <ul>
                            <li>Tables & Chairs</li>
                            <li>Sofas</li>
                            <li>Occasional Furniture</li>
                            <li>Children's Furniture</li>
                            <li>Beds</li>
                        </ul>


                    </li>
                    <li>
                        Decor
                        <ul>
                            <li>Bed Linen</li>
                            <li>Throws</li>
                            <li>Curtains & Blinds</li>
                            <li>Rugs</li>
                            <li>Carpets</li>
                        </ul>
                    </li>
                    <li>
                        Storage
                        <ul>
                            <li>Wall Shelving</li>
                            <li>Kids Storage</li>
                            <li>Baskets</li>
                            <li>Multimedia Storage</li>
                            <li>Floor Shelving</li>
                            <li>Toilet Roll Holders</li>
                            <li>Storage Jars</li>
                            <li>Drawers</li>
                            <li>Boxes</li>
                        </ul>

                    </li>
                    <li>
                        Lights
                        <ul>
                            <li>Ceiling</li>
                            <li>Table</li>
                            <li>Floor</li>
                            <li>Shades</li>
                            <li>Wall Lights</li>
                            <li>Spotlights</li>
                            <li>Push Light</li>
                            <li>String Lights</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                Stores
                <ul>
                    <li>
                        <div id="template" style="padding: 10px;">
                            <h2>Around the Globe</h2>
                            <ol>
                                <li>United States</li>
                                <li>Europe</li>
                                <li>Canada</li>
                                <li>Australia</li>
                            </ol>
                            <img src="../content/web/menu/map.png" alt="Stores Around the Globe" />
                            <button class="k-button">See full list</button>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                Blog
            </li>
            <li>
                Company
            </li>
            <li>
                Events
            </li>
            <li disabled="disabled">
                News
            </li>
        </ul>
    </script>
    <script id="search-template" type="text/x-kendo-tmpl">
        <span class="k-textbox k-display-flex">
            <input autocomplete="off" placeholder="Search products" title="Search products" class="k-input">
            <span class="k-input-icon">
                <span class="k-icon k-i-search"></span>
            </span>
        </span>
    </script>
    <script>
        $("#appbar").kendoAppBar({
            themeColor: "dark",
            items: [
                { template: '<a class="k-button" href="\\#"><span class="k-icon k-i-menu"></span></a>', type: "contentItem" },
                { width: 16, type: "spacer" },
                { template: kendo.template($("#menu-template").html()), type: "contentItem" },
                { type: "spacer" }, // <----------------------------------------------------------
                { template: kendo.template($("#search-template").html()), type: "contentItem" },
                { width: 8, type: "spacer" },
                { template: '<a class="k-button k-clear-search" href="\\#">Clear search</a>', type: "contentItem" },
                { width: 8, type: "spacer" },
                { template: '<a class="k-button k-toggle-button" href="\\#"><span class="k-icon k-i-saturation"></span></a>', type: "contentItem" }
            ]
        }).on("input", "input.k-input", function (e) {
            var input = e.currentTarget;
        }).on("click", ".k-button", function (e) {
            e.preventDefault();
        }).on("click", ".k-clear-search", function (e) {
            $("#appbar input.k-input").val("").trigger("input");
        }).on("click", ".k-toggle-button", function (e) {
            e.preventDefault();
        });

        $(kendo.roleSelector('appbar')).find(kendo.roleSelector('menu')).kendoMenu();
    </script>

  <style>
    .k-appbar{
          overflow: visible;
    }
  </style>

See Also

In this article