10

Sounds like it should have an obvious, clear-cut answer, but I couldn't find much mention of it: When building a website, what breakpoint / width is most ideal to switch from a horizontal tab-style nav menu to a vertical toggle mobile menu, hidden behind a 'hamburger' ☰ icon?

Seeing as I mostly seem to be designing websites with a container width of 1200px, and there aren't many desktop / laptop computer screen sizes below that, I've been getting the mobile menu to kick in at / below that 1200px width, which simplifies my workflow somewhat.

But is it good practice? Is there an audience of device users who would prefer a lower breakpoint? Perhaps iPad users in landscape orientation would prefer a "normal" menu?

I've seen websites that have a collapsible mobile-style menu for all widths, including desktop, so I guess it comes down to the desired UX on a case-by-case basis, however it would be useful to know of any unforeseen considerations.

  • at which width your menu still fits the horizontal tab-style.. e.g. as a programmer, I often use my browser in 1/2 of a HD screen => around 950-960px - mobile menu would be OK, horizontal scrolling would not. – Aprillion Apr 17 '16 at 10:33
  • Setting the breakpoint just outside the menu width used to be my approach and think that's one of the reasons I changed direction and started using a standard 1200px breakpoint. There were too many considerations, for example the fact that menus can change size when the client adds items - just one of many which added up, and solved by moving the breakpoint way outward. – simbasounds Apr 17 '16 at 15:23
  • When you say 'vertical toggle mobile menu' are you talking about hiding it behind a hamburger/ menu icon or simply displaying it vertically? – Woodwoerk Apr 20 '16 at 6:30
  • Yes @Woodwork, I was referring to hiding it behind a hamburger ☰ icon which drops down vertically when clicked. I'll update my question. – simbasounds Apr 21 '16 at 9:51
9

Forget mobile breakpoints, there's no phone and tablet sizes outside marketing. Breakpoints should follow the content, not the screen size.

As a simple example, let's consider the menu:

  Home  |  Products  |  Contacts

Do you think you should ever provide a mobile menu? Do you really want to stick three elements in a hamburger menu? They can probably fit very well on your screen at >=320px

On the other hand, there's this menu:

 Home  | TVs | Tablets | Notebooks | Printers | Air Conditioners | Routers | Help

Which needs to be adjusted much sooner. But at the same time, do you want to show a hamburger at <1000px because it doesn't fit on one line?

I would explore other navigation options, like the Priority+ pattern


As a side note, this applies to all of the site parts. Don't just switch to the mobile layout just because you reached <700px even if content still fits perfectly the way it is at 400px. Google Web Fundamentals has a page exactly on this:

Create breakpoints based on content, never on specific devices, products, or brands.

From: How to choose breakpoints

  • 1
    Thanks for pointing in the direction of Priority+ Pattern @bfred.it – simbasounds Apr 21 '16 at 20:05

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.