Rethinking Complex Mobile Navigation
Complex navigation on mobile doesn't have to mean hamburger menus, slide-in panels, or deeply nested accordions. Several alternative patterns can handle multiple navigation levels more gracefully, and they often reduce the cognitive load that comes with traditional approaches. The key is matching the pattern to the content structure and the audience.
Trim Navigation Signposts
Accordions generally outperform slide-in menus for multi-level navigation. However, they introduce a common problem: the need to signal collapsible sections with icons. When a menu mixes collapsible items, links to category pages, and accordion state indicators, users get pulled in too many directions at once.
A menu item may carry an icon pointing down when collapsed, up when expanded, and right when it's a link to a standalone page. That's three distinct signals competing for attention, and the meaning of each isn't always obvious.
One way to clarify things is to underline links and strip away their icons entirely. If collapsible menus and direct links must coexist, this separation makes the distinction clearer at a glance.
Often two icons are enough — one for the collapsed state, one for the expanded state. Some sites go even further. The Icelandic Postal Service uses a single icon and indicates expansion by changing the heading color.
Before layering icons onto a mobile menu, consider whether they can be removed or simplified. Users rarely need three different directional cues in one list.
A Single Action Per Navigation Bar
Some navigation designs try to serve two functions at once: linking directly to a category page while also offering expansion into sub-items. This typically means a tap on the title goes to the category, while a tap on a separate icon opens the sub-navigation. A vertical separator is often added to make the split obvious.
That approach tends to cause errors. Users scanning the menu may accidentally tap a title and get pushed to a category page before they're ready to commit. They then have to backtrack and start over. The extra affordances in the bar create more friction than they remove.
A cleaner alternative assigns the entire navigation bar a single function: opening the next level. On the Mammut site, tapping anywhere on a section reveals the second level of navigation, where users can explore all items or jump into a sub-category. The goal is to let users move forward without worrying about hitting the wrong action.
If a link to a full category page is needed, it belongs inside the expanded accordion or in a separate view — not competing with the expansion control in the bar itself.
The Billboard Pattern for Priority Items
Not every navigation item deserves equal weight. Frequently used sections or top tasks can be displayed more prominently above the rest of the menu, while the full navigation remains available below. This is the billboard pattern.
Otto, Korea Post, and Deutsche Post all use this approach, giving key topics or features greater visual presence at the top of the menu while keeping secondary items accessible.
When Nested Accordions Actually Work
For very large sites, nested accordions may seem like the only way to expose a huge amount of navigation. The argument in their favor: if users can jump from any page to a page four or five levels deep, expert users can move through the site very quickly.
That holds true in practice for frequent visitors, who typically handle multiple nested accordions without issue. Infrequent users, however, often struggle. They don't share the organizational knowledge that the navigation structure mirrors, so finding the right path is harder. When these users need something specific, they tend to reach for search rather than traversing the tree level by level. The problem becomes pronounced when the visual difference between levels is subtle, as on the WHO website.
If nested accordions are unavoidable, distinct typographic and visual treatment for each level makes the hierarchy legible. It should be immediately clear where one level ends and the next begins — and where actual page links start appearing.
Stockholm University combines type contrasts with different icon styles to mark nesting depth. Whether that combination performs better than typography alone is unverified, but it's worth testing.
DOT, Denmark's public transport site, uses a + icon on the right across all accordion levels and places a chevron on the left. The result is a four-level nested accordion set that, while heavy, appears to function acceptably for its audience.
Allianz achieves similar depth with a single chevron icon and strong visual separation: white text on blue for the first level, bold text for the second, and plain text for the third. The menu initially shows only the four most important items, with the rest available on a separate page.
Any scheme beyond three levels becomes hard to distinguish through indentation and type treatments alone. Nested accordions can work, but only when each level is unmistakably distinct.
Slide-In Menus: A Last Resort
Slide-in menus present one level of navigation at a time, sliding the new level in from the side. They can accommodate virtually unlimited levels, but they make quick jumps impossible — users must go back a level before moving forward again.
Unilever's menu shows a single level at a time. It fits a vast amount of content, but content discovery is slow and the behavior of the "Back" button can be unclear. Users may not know which level they'll land on.
Where slide-ins are unavoidable, the "Back" control should be labeled contextually — naming the destination level rather than a generic "Back" label, as Deutsche Post does. Their menu also places top tasks on the main menu page itself.
The New England Journal of Medicine adds typographic contrast to distinguish expandable sections from links that jump to a new page. Making links visually obvious helps, as the ADAC example shows.
Animation only compounds the issues. Animated slide-ins can disorient frequent users, slow down discovery, and add noise to an interface that may already be overloaded with icons. While a slide-in menu is occasionally an acceptable choice, it's rarely the best one. Accordions allow faster level-to-level jumps because there's no need to retreat to a parent level first.
The Navigation Stack for Faster Backtracking
Moving users deeper into a menu means also giving them a path back. Instead of a single "Back" button, previous sections can be stacked — acting like a visible breadcrumb trail of the levels the user has visited.
Coolblue, a Dutch retailer, lets users return to any earlier level in the stack as they explore deeper navigation. This supports efficient jumps between levels, a clear improvement over a single-purpose "Back" button when users move from one overlay to the next.
Curtain Pattern: Two Levels, Side by Side
When speed matters, the best navigation is the one users can see immediately. The curtain pattern is a way to get more of that benefit without sacrificing screen space: split the viewport vertically and show one navigation level in each pane. Moving forward means tapping a large area in the left pane; there is no need to close a menu or retrace steps, as LCFC demonstrates.
Labels that don't fit can wrap onto multiple lines, or the first level can collapse into icon tabs, as on Playstation. The downside is that the "drawer" affordance on the left isn't always obvious—the vertical lines on that site suggest a draggable pane, but it doesn't actually function that way.
ESPN compresses the first level to a very thin vertical strip, which risks mistaps but preserves the same principle: two levels visible at once. The pattern carries over well to filtering. Myntra shows all filter attributes on the left, with corresponding values in the right pane. If the values overflow, users can scroll within the pane or search for a specific filter. An "Apply" button should stay floating, ideally with a live count of matching results.
The approach can be extended to more complex filtering, where users select a category and then define values. FT Screener uses a side-by-side layout of groups and their filters, adding each chosen filter to a summary bar at the top. It is an effective "filter constructor" for a high-complexity mobile task. The same two-pane idea works for simple choices, such as a language selector: Oracle's footer organizes regions and languages as vertical tabs, so users only ever see relevant options.
The curtain pattern is best suited to flat architectures of two, at most three, levels. It is significantly faster than slide-in menus but less flexible than accordions. While not a universal solution, it makes strong use of otherwise wasted space, especially for users who jump between sections frequently.
The Case for Cutting Levels
If your content tree goes deeper than the curtain pattern can handle, it may be worth challenging the depth itself. For instance, the University of Antwerp uses just one level in its mobile menu. Further down the tree, content lives on standalone pages where navigation happens through obvious cards and links. Gov.uk does similar: its drawer covers only two main sections, and everything beyond that is on separate pages.
Korea Post offers a useful variation. When a second-level item is tapped in the drawer, third-level options appear immediately, so users see the full picture without extra taps. Breadcrumbs there include drop-downs for jumping between sibling sections—the "sideways breadcrumbs" pattern.
Three or more navigation levels are rare in a mobile drawer for good reason. Testing a design that exposes only two levels might retain discoverability while simplifying the UI dramatically.
Navigation Queries: Asking What the User Wants
Beyond search and standard menus, another option is to present the most common tasks directly, as Deutsche Post does. A more structured take is the navigation query: a field that asks users about their intent and lets them pick a relevant topic. Cosmos Direkt, a German insurance provider, implements this as a <select> menu listing tasks visitors frequently want to perform. It complements, rather than replaces, the regular menu, but speeds up the route to relevance considerably for users who recognize their goal in the list.
Checklist for Complex Navigation
- Accordions handle deep, even nested, structures reliably—expert users handle them well.
- Remove unnecessary menu icons, and never use icons that imply more than two directions.
- Use the billboard pattern to showcase the top tasks users arrive with.
- Make each nested level visually distinct through indentation and type styles.
- Underline links wherever possible to keep affordances obvious.
- Slide-in menus tend to be slow and disorienting; accordions usually outperform them.
- Preserve a traversal stack of visited levels so users can jump back quickly.
- Curtain navigation is exceptionally fast for two levels, and workable for three.
- Question whether every level needs to be in the menu at all—often, the relevant page can present onward paths.
