JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<ul id="menu"></ul>
<button class="k-button first-button">Click me for 1</button>
<button class="k-button second-button">Click me for 2</button>

CSS

.first-button {
    margin:15px 0px 0px 150px;
}
.second-button {
    margin:15px 0px 0px 20px;
}

JavaScript

var elements = [{
    text: "Item1",
    cssClass: "Item1", //This is key.We will use it to programmatically open an item
    items: [{
        text: "SubItem1"
    }, {
        text: "SubItem2"
    }]
}, {
    text: "Item2",
    cssClass: "Item2", //This is key.We will use it to programmatically open an item
    items: [{
        text: "SubItem1"
    }, {
        text: "SubItem2"
    }]
}];
$("#menu").kendoMenu();
var m = $("#menu").data("kendoMenu");
m.append(elements);

$(".first-button").click(function () {
    m.open("." + elements[0].cssClass); //The logic on which element from your source is up to you. 
});
$(".second-button").click(function () {
    m.open("." + elements[1].cssClass); //The logic on which element from your source is up to you. 
});