Web navigation patterns

The hamburger menu (three horizontal lines) is the most widely used mobile pattern for hiding the primary navigation. Its advantage is clear: it frees up screen space by tucking every option behind an icon. Its disadvantage is equally clear: what is not visible does not get used. NNGroup research shows that hidden navigation reduces content discovery by 20–50 % compared to visible navigation.

On desktop, the hamburger rarely has justification. If space allows, showing the main options in a horizontal bar is always preferable. On mobile, the hamburger is acceptable when there are more than 5–6 top-level options, but if you can narrow them down to 4–5, a bottom tab bar is more effective.

Tabs are one of the most effective patterns because they keep options visible at all times. On mobile, the bottom tab bar has become the standard for apps and websites with 3–5 primary sections. Instagram, Spotify and LinkedIn use it because it guarantees instant access to key areas.

On desktop, horizontal tabs work well for organising content within a single page (for example, product tabs with description, specifications and reviews). The main limitation is capacity: more than 5–6 tabs on mobile cannot fit without horizontal scroll, which users tend to ignore.

A mega menu is an expandable panel that displays multiple categories and subcategories organised in columns. It is the standard pattern for ecommerce and corporate sites with deep content structures. Amazon, IKEA and most large retailers use it because it lets users see the entire site architecture at a glance.

Implementation requires care: it must be keyboard-accessible, have clear activation areas and not close accidentally as the cursor moves between elements. On mobile, a mega menu typically transforms into an accordion menu with collapsible levels.

Breadcrumbs are a secondary navigation element that shows the path from the current page back to the site root. They do not replace primary navigation, but they are indispensable on sites with hierarchies deeper than two levels: ecommerce, technical documentation, content portals.

From an SEO standpoint, breadcrumbs are valuable because Google displays them directly in search results as rich snippets, improving click-through rates. They are implemented with structured data markup (JSON-LD) in addition to the visual HTML.

The sidebar is the preferred pattern for web applications, dashboards and admin panels. It lets you show many navigation options persistently without interfering with the main content. Tools like Notion, Slack and Linear use it as the central navigation axis.

On mobile, the sidebar is typically hidden inside a drawer that opens from a hamburger icon or a swipe gesture. The main challenge is managing sidebars with many options: grouping by section, allowing groups to collapse and offering internal search are key practices.

Bottom navigation is a fixed bar at the bottom of the screen on mobile devices. It is the most ergonomically accessible pattern: the lower zone is the easiest to reach with the thumb, especially on large screens. Google officially recommends it in Material Design for the 3–5 most frequent actions.

Bottom navigation works particularly well when users switch frequently between a small number of primary sections. Its limitation is that it competes with content by claiming fixed space at the bottom and does not scale beyond 5 elements without losing legibility.

Navigation pattern selection should be driven by data, not aesthetic preference. The deciding factors are: number of top-level options, depth of the structure, frequency of navigation between sections, primary device of the audience and product type (content site, app, ecommerce, SaaS).

In practice, most products combine several patterns: a tab bar for primary navigation on mobile, a mega menu on desktop, breadcrumbs for orientation on interior pages. The key is that each pattern fulfils its role without redundancy or confusion.