This article is an example of a burger menu utilizing the Kendo Splitter Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to have a sidebar component for navigation, which is similar to Kendo Drawer. But we want the sidebar to be resizable.
We will utilize Kendo Splitter and Kendo ToolBar to achieve this requirement. Our Kendo ToolBar will contain the burger menu which handles the toggling of the sidebar which is controlled by the Kendo Splitter. We also add some resizing code to make the page responsive.
Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.
Here are the outputs:
 |
| Kendo Splitter Burger Menu Open |
 |
| Kendo Splitter Burger Menu Closed |
There you have it. A quick and simple example of how to utilize Kendo Splitter and Kendo ToolBar to make a burger menu with sidebar.
