Using a navigation drawer that is off-screen, and will slide in when a user clicks the 'hamburger' icon, should that drawer push all the content to the right, or be an overlay on top of the content.

What are the benefits or cons to doing either?

  • I've only see slideout drawers overlay on content but that doesn't mean it's wrong for the drawer to push the content out of the way. How important is the content? I think that the drawer pushing the content to the right would help to reinforce the idea that there's hidden "stuff" you can "pull out" in the app. – Mark Bubel Oct 31 '13 at 20:53

Push content to the right if you want to suggest that the contents of the drawer are conceptually distinct from, or more important (at the moment the drawer is being displayed) than, the main content.

Pushing content to the right, and potentially off the screen, suggests that the main content isn't needed, or has been put on hold, when you're working with the drawer. The effect gets much stronger if you add a semitransparent overlay onto the main content to visually separate the two areas.

An overlay that leaves the content in place (e.g. the Evernote Web Clipper) doesn't reduce the importance of the main content. The downside, of course, is that the contents of the drawer have to compete more with the main content for attention.


In Apples user interface guidelines about using transitions they recommend you to use full screen animations in an Ipad app sparingly because it could make the interface feel messy. That is something to take into consideration.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.