Navigation Patterns: Tabs, Sidebar, Bottom Nav, and the Hamburger Menu
Navigation patterns determine how people find each section of your product. Compare tabs, sidebars, bottom bars, and the hamburger menu, with data from NN/g.
Why does navigation matter so much?
Because it is the first thing people use when they do not know where they are. If navigation is not visible, people have to guess what exists. NN/g measured this: in a study of 179 participants, hidden navigation reduced content discoverability by more than 20%, tasks were at least 39% slower on desktop with hidden navigation, compared with visible or combo navigation, and 15% slower on mobile, compared with combo navigation (NN/g: Hamburger Menus and Hidden Navigation Hurt UX Metrics).
These figures come from NN/g’s original study. Read them as a warning about hidden navigation, not as a universal rule for every product.
What does NN/g say about the hamburger menu?
For desktop, NN/g is direct: do not use hidden navigation, such as the hamburger icon. On mobile the rule is more flexible: with four or fewer top-level links, show them, and with more than four, hiding some is “the only reasonable solution” (NN/g: Hamburger Menus).
In the same study, combo navigation, with some options visible and others in a menu, was used 86% of the time on mobile, against 57% for hidden navigation. On desktop, hidden navigation was used 27% of the time, visible 48% and combo 50%.
A second NN/g article on mobile recommends visible or combined navigation when there are only four or five top-level choices. If you do hide it, the menu should look distinct from the logo and carry a label. On one analyzed site, the menu icon sat beside the logo and looked like part of it, and its use was low (NN/g: How to Make Navigation (Even a Hamburger) Discoverable on Mobile).
How do the patterns compare?
| Pattern | Where it lives | Advantage | Risk |
|---|---|---|---|
| Tabs | Top, under the header | Quick switching between related views | Many tabs get cut off on small screens |
| Sidebar | Left | More room for complex structures | Takes up room on small screens |
| Bottom bar | Bottom, on mobile | Sections always visible | Holds few destinations (three to five, per Android) |
| Hamburger menu | Hidden, usually top left | Saves space | Less use and longer to reach, according to NN/g |
Platform guidelines agree on the basics. Android’s design guidance says the navigation bar holds three to five destinations at the same level, becomes a navigation rail on large screens, and that the navigation drawer can hold more than five destinations but is less comfortable on compact screens. Apple’s guidelines for tab bars say to avoid overflow tabs (the “More” tab), because it makes hidden content harder to reach, and suggest considering a sidebar when the information structure is complex.
How is the hamburger icon used today?
NN/g published a review of the icon in 2025. It found that most people now recognize the hamburger as a menu, especially when it sits in the top-left corner with three equal lines. Line-based icons such as list-view or filter icons can be mistaken for it. The recommendation is to use the standard icon, without borders, in that position, and to add a “Menu” label. The article concludes that hamburger menus are viable but not universal, and it advises not to hide navigation if you do not need to (NN/g: The Hamburger-Menu Icon Today).
When should you NOT hide navigation?
- When there are few main sections and all of them are used often.
- On desktop, where NN/g recommends against hidden navigation.
- In a product where search is not solid. If people cannot find something through navigation, they will not find it hidden either. Review search UX before you hide more.
Example
Illustrative example: a health app has five sections: today, appointments, history, messages, and profile. An earlier version used a hamburger menu, and the team noticed most users could not find “messages.” The redesign moves to a bottom bar with the five sections, using text labels, and leaves the profile in the header. Advanced settings that are rarely used sit inside profile. Five options fit the bar well; a sixth would have forced something to be hidden.
To keep section names understandable, review the consistency and standards of your product. And if navigation is part of the underlying structure, the article on information architecture explains how to organize content before choosing a pattern.
Common mistakes
- Hiding primary navigation on desktop for aesthetic reasons.
- Using a hamburger menu with no label, so it reads as a decorative icon.
- Using tabs with names that do not describe the content.
- Putting more than five destinations in a bottom bar, or letting them overflow into a “More” tab.
- Choosing a pattern without testing with real people how they find sections.
What you can do tomorrow
- Open your product and ask someone who does not know it where the settings section is. Note how long they take.
- Count your main sections. If there are four or five, check whether the navigation is visible.
- If you use a hamburger menu, add a text label and compare usage over a week.