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

Getting Started with the Menu

This guide demonstrates how to get up and running with the Kendo UI for jQuery Menu.

After the completion of this guide, you will be able to achieve the following end result:

    <ul id="menu">
    </ul>
    <script>
      $(document).ready(function() {
        $("#menu").kendoMenu({
          dataSource: {
            data: [
              {
                title: "Furniture", items: [
                  { title: "Tables & Chairs" },
                  { title: "Sofas" },
                  { title: "Occasional Furniture" }
                ]
              },
              {
                title: "Decor", items: [
                  { title: "Bed Linen" },
                  { title: "Curtains & Blinds" },
                  { title: "Carpets" }
                ]
              }
            ]
          },
          dataTextField: "title",
          animation: {
            open: { effects: "slideIn:up" }
          },
        });
      });
    </script>

1. Create an ul Element

First, create an <ul> element on the page from which the Menu component will be initialized.

    <ul id="menu"></ul>

2. Initialize the Menu

In this step, you will initialize the Menu from an <ul> element. When you initialize the component, all settings of the component will be provided in the script statement. You have to describe its layout, configuration and event handlers in JavaScript.

    <ul id="menu"></ul>
    <script>
      $("#menu").kendoMenu({});
    </script>

3. Configure the DataSource

The Menu items can be loaded from a JSON array of data. To use this approach, configure the dataSource setting.

    <ul id="menu"></ul>
    <script>
      $(document).ready(function() {
        $("#menu").kendoMenu({
          dataSource: {
            data: [
              {
                title: "Furniture", items: [
                  { title: "Tables & Chairs" },
                  { title: "Sofas" },
                  { title: "Occasional Furniture" }
                ]
              },
              {
                title: "Decor", items: [
                  { title: "Bed Linen" },
                  { title: "Curtains & Blinds" },
                  { title: "Carpets" }
                ]
              }
            ]
          }
        });
      });
    </script>

4. Specify the DataTextField

The dataTextField configuration must point to a field in the dataSource data.

    <ul id="menu"></ul>
    <script>
      $(document).ready(function() {
        $("#menu").kendoMenu({
          dataSource: {
            data: [
              {
                title: "Furniture", items: [
                  { title: "Tables & Chairs" },
                  { title: "Sofas" },
                  { title: "Occasional Furniture" }
                ]
              },
              {
                title: "Decor", items: [
                  { title: "Bed Linen" },
                  { title: "Curtains & Blinds" },
                  { title: "Carpets" }
                ]
              }
            ]
          },
          dataTextField: "title", // The text of the Menu item will be retrieved from the "title" field in the dataSource.
        });
      });
    </script>

5. Modify the Animations

The Menu enables you to modify the default open and close animations.

    <ul id="menu"></ul>
    <script>
      $(document).ready(function() {
        $("#menu").kendoMenu({
          dataSource: {
            data: [
              {
                title: "Furniture", items: [
                  { title: "Tables & Chairs" },
                  { title: "Sofas" },
                  { title: "Occasional Furniture" }
                ]
              },
              {
                title: "Decor", items: [
                  { title: "Bed Linen" },
                  { title: "Curtains & Blinds" },
                  { title: "Carpets" }
                ]
              }
            ]
          },
          dataTextField: "title",
          animation: {
            open: { effects: "slideIn:up" } // When a Menu item is hovered, the Menu will slide up instead of down.
          },
        });
      });
    </script>

Next Steps

See Also

In this article