ResponsivePanel Overview

The Kendo UI ResponsivePanel widget allows you to hide part of a page content on small screens. This allows more space for content on mobile screens.


CSS3 media queries are supported in Internet Explorer 9 and later versions.


Specify Width and Placement

Specify the page width when the content becomes hidden via the breakpoint configuration option. The placement of the expandable content can be configured via the orientation option.

The example below demonstrates how to collapse the menu on the left of small screens.

    <!-- toggle icon, .k-rpanel-toggle hides it on page width > breakpoint -->
    <button class="k-rpanel-toggle"><i class="k-icon k-i-menu"></i></button>

    <h1>Site header</h1>

  <!-- responsive panel -->
  <nav id="sidebar">
    <a href="#">Home</a>
    <a href="#">About</a>

  <article id="content">
    <p>Lorem ipsum<p>

        breakpoint: 768,
        orientation: "left"
      .on("click", "a", function(e) {
        // handle clicks of dummy items, actual links do not need this
        alert($( + " clicked");

    #sidebar {
      /* panel background should be set to match design */
        background: #092646;

    article {
      /* clear the floating sidebar */
      overflow: hidden;

    html, body {
        margin: 0;
      padding: 0;
    body {
        font-family: Arial,sans-serif;
    header {
        padding: 1em;
        color: #fff;
      background-image: linear-gradient(to top, #014F80 0%, #092646 100%);

    h1 { display: inline; }
    p { padding: 2em; }
    nav a {
        border: 1px solid #ccc;
      background: #ddd;
      display: block;
      text-decoration: none;
      padding: .5em;

See Also

In this article
Not finding the help you need? Improve this article