Design the navigation as simple as possible. When designing the website structure, apply the Mobile First approach. Simply forget about twenty-six items in the main navigation and about the second and third level. This will save your butt when designing the website.
Design the website as if the navigation was not there. It is absolutely clear that on the smallest devices, we will have to hide a part of the menu. Therefore, we have to start designing websites without it. Just duplicate the navigation scheme in the content and place something like the site map on the homepage.
If you can fit the whole navigation in, show it on mobiles as well. It may sound a little funny, but the world is full of menus with 4 items that hide the menu under a hamburger icon just because it is cool. If the resolution is high enough, just show the menu.
If you can’t show the whole navigation, consider using different design patterns than the show / hide pattern. I suggest you take a look at The Priority+ Navigation Pattern.
And if nothing of this works, then choose the show / hide design pattern – the one we call a hamburger, based on the icon shape.
Keep reading - by choosing the hamburger design pattern, you are very likely to run into a lot of problems.
The hamburger icon and hiding the navigation has recently been under fire from critics. I say that on some websites we can’t do without it and web design as a discipline needs it.
It is well-known that icons take time for people to get to know them. The mankind was not born with the knowledge of what the play, pause and stop icons stand for.
One of the main reasons we’re able to use these symbols (play, pause and stop) unlabeled is the fact that it worked its way into our cultural repertoire thanks to continued repetition on tape decks and VCRs.
– Andy Budd, In defence of the hamburger menu
The hamburger icon is relatively new and it gets even more complicated when you consider operating systems and their native apps. These apps use various icons for opening the navigation (hamburgers, kebabs, meat balls…). Users simply don’t know what these icons stand for.
Earlier in the text, I said we need the hamburger icon in web design. Therefore, we have to educate users by using test labels.
In the age of minimalism and flat design, it is also important to say that an icon should look like a button.
Every icon is an abstract simplification of what it triggers. In the case of the hamburger icon, it stands for a list of items. This may correlate with a simple navigation with items stacked onto each other. However, it may also reveal a multilevel menu or a whole secondary content as we can see at the website of the Czech magazine Respekt. This is just not right.