Navigation is the skeleton of a website or app. When it works, users move around without thinking; when it doesn't, every move becomes a small search. There is no single best pattern: there are patterns suited to different amounts of content, devices and habits. Let's look at the main ones with their strengths and limits.
The hamburger menu
The icon with three horizontal lines hides the menu behind a tap. It has become a recognized convention, especially on mobile, because it frees precious screen space.
Its limit is exactly what makes it convenient: it hides things. Items people cannot see get used less, because users do not know they exist or do not think to look for them. That is why the hamburger menu works well for secondary content or for sites with many sections of similar importance, and less well for an app's two or three main destinations.
A few touches improve its effectiveness:
- pair the icon with the word «Menu», which makes its meaning explicit;
- surface the most frequent actions outside the menu, such as search or the cart;
- make sure the button has an accessible name and that the open menu can be closed with the Esc key and from the keyboard.
The tab bar
On mobile, a tab bar at the bottom shows three to five main destinations, always visible. It is the pattern used by many everyday apps, because it lets people switch section with a single tap, in the area easiest to reach with the thumb.
It works when the main sections are few and frequently used. If they grow to seven or eight, you end up adding a «More» tab that brings back the problems of the hidden menu. Each tab should have both an icon and a text label: icons alone are ambiguous, except for very few universally understood ones.
The horizontal menu
On desktop sites, the horizontal menu at the top, with the main items visible, remains the clearest pattern. Every section is within sight and the menu itself communicates what the site offers.
The constraint is space: beyond six or seven items the row gets crowded, labels shrink until they become cryptic, and on mid-sized screens items wrap onto a second line. That is often a sign that information architecture work is needed, not just visual design.
Dropdowns and mega menus
When sections have many subsections, dropdowns and mega menus, wide panels showing many items arranged in columns, can expose the structure effectively. Some risks to manage:
- hover opening that is too sensitive, making the panel appear and disappear while the user moves diagonally toward an item;
- inaccessibility via keyboard and touch, where hover does not exist;
- overload, when the panel holds dozens of links with no hierarchy.
It is often more robust to open the panel on click or tap, with a visual cue that the item has a submenu.
Breadcrumbs
A breadcrumb trail such as «Home › Electronics › Headphones › Wireless headphones» shows where you are in the hierarchy and lets you go up a level with one click. It does not replace the main menu: it is secondary navigation, especially useful in deep sites such as online shops, documentation and archives.
To work, it must reflect the real hierarchy, not the browsing history, and the last item, the current page, should not be a link. On mobile it can be shortened to show only the parent level, with an arrow such as «‹ Headphones».
Local navigation
Within a long section, such as a guide or a settings panel, local navigation, for example a side index or a list of sections at the top of the page, helps people find their way without going back to the main menu. Highlighting the current section, with a marker or a different text weight, completes the orientation.
How to choose
| Situation | Recommended pattern |
|---|---|
| Mobile app with 3-5 frequently used sections | Bottom tab bar |
| Desktop site with a few main sections | Visible horizontal menu |
| Site with many sections and subsections | Main menu with click-opened mega menu, breadcrumbs |
| Mobile site with lots of secondary content | Labeled hamburger menu, key actions outside |
| Documentation or long guide | Side index and local navigation |
Whatever the pattern, some rules always apply: show the current location, use understandable labels, keep navigation in the same place on every page, and test it with real users, perhaps with a tree test before even designing it.
In short
- The hamburger menu saves space but hides things: fine for secondary content, less so for the main sections.
- A tab bar is ideal on mobile for a few frequently used sections.
- On desktop a visible horizontal menu remains the clearest pattern.
- Breadcrumbs and local navigation help people find their way in deep sites.
- Each pattern should be chosen according to content volume, device and user testing.
