Code:
HTML Code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.0/fluent/fluent-main.css">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.ui.core.min.js"></script>
    <style>
      body { margin: 0; }
      #main-content { padding: 0 1rem; }
      @media (min-width: 992px) {
        .hide-full-width {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div id="navigation-top"></div>

    <div id="navigation-side-responsive-panel">
      <ul id="navigation-side">
        <li>
          Admin
          <ul>
            <li>Users</li>
            <li>Roles</li>
            <li>Menus</li>
          </ul>
        </li>
        <li>
          Examples
          <ul>
            <li>Example</li>
          </ul>
        </li>
      </ul>
    </div>

    <div id="main-content">
      <h1>Kendo UI Core Layout</h1>
      <p>Main content goes here.</p>
    </div>

    <script>
      $(document).ready(function () {
        $('#navigation-top').kendoToolBar({
          items: [
            { template: 'Brand' },
            {
              attributes: { class: 'hide-full-width k-button-flat k-button-flat-base' },
              menuButtons: [
                { text: 'Users' },
                { text: 'Roles' },
                { text: 'Menus' }
              ],
              text: 'Admin',
              type: 'dropDownButton'
            },
            {
              attributes: { class: 'hide-full-width k-button-flat k-button-flat-base' },
              menuButtons: [
                { text: 'Example' }
              ],
              text: 'Examples',
              type: 'dropDownButton'
            },
            {
              type: 'button',
              text: 'Profile',
              overflow: 'always'
            },
            {
              type: 'button',
              text: 'Change Password',
              overflow: 'always'
            },
            {
              type: 'button',
              text: 'Logout',
              overflow: 'always'
            }
          ]
        });

        $('#navigation-side-responsive-panel').kendoResponsivePanel({
          breakpoint: 992,
          orientation: 'left'
        });

        $('#navigation-side').kendoPanelBar({
          expandMode: 'single'
        });
      });
    </script>
  </body>
</html>
Demo: https://dojo.telerik.com/UnIbANAr