Side Drawers
Last updated: September 11, 2015 at 19:25 pm

Side drawers are panels that transition in from the left or right side of the screen to display content or navigation options. When fully extended, one will overlay the content on the main page. Like a modal interaction, the side drawer must be closed in order for the user to continue interacting with the page below.


Visual example of the element:


What problem does this element or pattern solve?
While initially used only on mobile devices, side drawers are becoming more common on the desktop.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web,

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Do you permit side drawers on desktop applications, or are they limited to touch devices only?
  • What visual affordance should be used to alert the user that a side drawer is available? While three horizontal lines (often called “a hamburger”) is the common icon used, many user experience experts believe a word such as “menu” should also be included.
  • How is the side drawer activated and/or closed? Swiping or clicking? If swiping, how is the drawer controlled on non-touch devices?
  • How should the sidebar be positioned when it is fully expanded? Is it permissible to cover global navigation or other header items?
  • What is the maximum percentage of the screen that a fully expanded drawer may cover?


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
slide-out menu, hamburger menu, pull-out menu, slide menu
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply