Kendo UI for jQuery

jQuery Drawer

  • Ready-to-use but fully customizable jQuery Drawer menu that can slide in from either side of a screen.
  • Part of the Kendo UI for jQuery library along with more than 100 professionally designed components developers trust for all their jQuery UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms, and a 3-million-strong developer community.
Drawer
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    Drawer menus are popular tools used to make the most out of small screen space. On click or tap of an icon (usually a “hamburger”), the menu slides in from the side of the screen. The jQuery Drawer gives such a tool in a ready-to-use, but fully customizable component.

    See the jQuery Drawer demo

    drawer
  • Mini Mode

    The mini version of the Drawer takes small screen optimization even further. It provides quick access to items even when closed. Rather than the full menu options only the icons are displayed in this mode, providing an even more compact navigation option.

    See the jQuery Drawer Mini Mode demo

    drawer-mini-mode
  • Hierarchical Items

    The jQuery Drawer component supports complex navigation scenarios by nesting child items under expandable parent nodes.

    See the jQuery Drawer Hierarchical Items demo

    drawer-hierarchical-items
  • Overlay and Push Modes

    The jQuery Drawer menu gives you two distinct choices when configuring its behavior

    • Overlay mode: The Drawer menu overlays the content at full height for general navigation scenarios.
    • Push mode: The Drawer menu interacts with a specific section of content and pushes it to the right or left while leaving the rest of the screen untouched. This is perfect for more contextual scenarios.

    See the jQuery Drawer Functionality demo

  • Keyboard Navigation

    Improve accessibility and productivity with keyboard-only navigation. This component supports keyboard navigation to help navigate and interact with items.  

    See the jQuery Drawer Keyboard Navigation demo

    keyboard-navigation
  • Accessibility

    The jQuery Drawer is compliant with Section 508 standards, is AA rated with WCAG 2.0 and follows WAI-ARIA standards.

    Read the jQuery Drawer Accessibility documentation

    jQuery accessibility