I'm working on a responsive site where the main navigation gets compressed to a "menu" button when at a mobile small-screen size. I feel like there are 2 strong methods for handling the navigation:

  1. Off-canvas -- menu pushes the page content to the right so that only a small portion is showing. Many apps (like Facebook) use this technique, as does Indochino (http://www.indochino.com).

  2. Dropdown -- menu comes down vertically (sometimes pushes page content down, sometimes covers page content). This seems slightly more common than off-canvas -- an example is Nokia (http://www.nokia.com).

I'm struggling to see a major usability difference between the two options, as it seems like it comes down to personal preference. Is there any research specifically comparing the two? Are there particular contexts where one may be stronger than the other?

  • I think you are right; it will probably be personal preference, as the methods are very similar to each other. I prefer the Off-canvas method, as it does not blend in with the vertical content, and many users have familiarity with the method Facebook uses.
    – Keiwes
    Jul 15, 2013 at 16:40

1 Answer 1


My two cents:

An off-canvas design works very well with a mobile app, as you can hook into native swipe gestures like Facebook does to deliver the most beautiful and usable design possible.

A dropdown, like with Bootstrap, works well for a mobile website, as you can simply tap and an animation will run, as opposed to an off-canvas, in which you should probably code a swipe gesture for usability. A dropdown would be your way to go.

  • An interesting way to distinguish -- but I also like Keiwes's point about off-canvas navigation not blending in with the vertical content. I also was under the impression that many mobile browsers do support swiping, so it may just be a matter of a little extra coding to recognize gestures. Jul 15, 2013 at 20:14
  • They do, it's just that it would be vastly inferior to a native swipe method.
    – Witch-King
    Jul 15, 2013 at 20:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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