Deep: Navigation UX patterns explored
How the world’s top tech companies are structuring their navigation. Insights from Linear, YouTube, NYT, Uber, Replit and more
🔒DoP Deep goes deeper into the concepts and ideas that are covered in the Weekly Briefing to help you learn lessons from the experiences of top tech companies. If you’d like to upgrade to receive these in-depth pieces of analysis you can do so below. Or you can find out more about what you get as a paid subscriber here.
Hi product people 👋,
Studies have shown that well-designed navigation can result in a significant 37% improvement in task completion rates, and a recent major study found that suboptimal navigation plagues many product teams, with 61% of websites analyzed having problems linked to navigation across UI elements like dropdown hovers.1
In this deep dive, we’ll explore the navigational styles and UX patterns of 20+ top tier companies including: YouTube, Linear, New York Times, Uber, Perplexity, Reddit and others.
For each company we’ve broken down the navigation types they use along with detailed screen grabs of their UI that you can download and keep a copy of. Plus, we’ll take a look across each of these examples to pull out navigational trends worth knowing about.
If you’re considering making changes to your navigation to optimise your product conversion rates, this deep dive should hopefully be helpful .
Coming up:
How this deep dive is structured
A deeper look at the companies featured: Uber, Notion, Replit, YouTube, Reddit, Dropbox, Retool and others
Why including one single button type in your navigation could drive growth and engagement
Modern UI trends and tactics deployed by companies including megamenus, animations, carousels and blurring effects
When to use which type of navigation - a simple guide
The list of companies in full - with downloadable UI examples for each navigation type (available at the bottom of this post).
How this deep dive is structured
For this analysis, we’re looking at 20+ top tier tech companies and exploring the different types of navigation they use across the web, in-product and mobile where necessary.
Here’s a summary of how we’re structuring this piece:
Company - the company name featured in the deep dive.
Navigation styles - this includes: horizontal, vertical, sidebars, fly-out, sticky navigation, megamenus and more - see below for a more detailed breakdown of this.
UX patterns / comments - notable patterns and commentary for each product navigation featured. This is split into different sections depending on where the navigation is featured e.g. a company website, in-product (web) or in-product (mobile). Only notable UI patterns worth knowing about are included here to give you an idea of how the pattern works.
Example UI - images of each of the examples shared. For some companies, a video is also included to help bring to life things like UI animations / effects.
Category - categories for this deep dive include a broad cross-section of different product types including: SaaS, workplace productivity, ecommerce, consumer software, AI, media and publishing and fintech.
Primary navigation text - the navigational text used in the primary navigation for each company featured (this is typically from a company’s website, not in-app).
Navigation types
As well as the common horizontal and vertical sidebar navigation types, some of the other of navigation styles and patterns featured here include:
Global switches - sitting above traditional navigation bars to allow users to make an often binary choice which impacts their experience (e.g. users in Uber’s app choose between Ride and Eats, users on Affirm’s website choose between “shoppers” and “business”).
Megamenu - typically a large, multi-column dropdown menu that appears when hovering over or clicking on a main navigation item. Companies like Affirm, Twilio, LinkedIn, Apple and Linear all use megamenus with various degrees of creativity.
Upsell in product navigation - an increasingly popular trend where companies are using navigation as real estate for upsells. We’ll explore some examples.
Fly-out - a submenu that appears to the side (often on hover or click) as an extension of a main menu item. Great for saving space in the navigation bar while offering detailed options for each main section. Apps like Claude and YouTube have used this - with mixed results.
Click toggles - navigation used to mostly appear on hover but more companies are increasingly adopting click toggles on the web, too. We’ll let you know which ones.
Scrollable carousels - a navigation pattern where users can scroll through items horizontally or vertically, typically used for image galleries or product displays. YouTube and other media companies are increasingly turning to these.
A deeper look at company UI navigation examples and important trends
Now that we’ve set the context a little, let’s dig deeper into some of the navigation examples from the companies featured - along with with some key trends and takeaways that show how navigation is being used more strategically in ways that go beyond simply helping users navigate.