12

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.

Improve this question
4
  • 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, 2016 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, 2016 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, 2016 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, 2016 at 9:51

1 Answer 1

Reset to default
10

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

Improve this answer
1
  • 1
    Thanks for pointing in the direction of Priority+ Pattern @bfred.it
    – simbasounds
    Apr 21, 2016 at 20:05

Your Answer

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

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