Topic

Navigation

Information architecture, menus, wayfinding, and navigation patterns.

Navigation is how people understand where they are and where they can go next. If the structure is wrong, no amount of visual polish will make the product feel clear.

UI Coach guides

Start here

GuideUI CoachNavigation

Navigation Design Patterns

How to choose and structure navigation so people know where they are and where they can go next.

Read the guide

From the community

Latest articles

EightShapes · Dan Brown · Jul 12, 2023

Concepts, information architecture’s building blocks

Photo by Eilis Garvey on Unsplash Series: information architecture in digital products It’s time for me to define what I mean by concept . I’ve dreaded this moment as much as you have. 😉 We use the word “concept” in design usually to mean “big idea” or “potential design direction.” But I’m talking about something els.

Read

UX Movement · anthony · Mar 19, 2025

How to Make Any Sidebar Menu Easier to Scan

How easy to scan is your sidebar menu? If you haven’t optimized the spacing, users will likely spend more time navigating and finding items. Balancing the spacing in the sidebar can help users navigate faster and easier. A typical mistake designers make is adding too much or not enough space. Both can make scanning fo.

Read

Webflow Blog · Jun 3, 2026

8 mega menu examples: Create user-friendly site navigation

Explore the best mega menu examples. Learn how to improve website navigation so visitors can compare options, find high-intent pages, and browse faster.

Read

Manuel Matuzovic · Jun 27, 2022

Analyzing pages in a particular state with Lighthouse

Historically, Lighthouse has analyzed the cold pageload of a page only. Clicking the “Generate report” button reloads the page before Lighthouse runs its tests. This can be problematic when you want to run tests on parts of the UI that are only visible when the user interacts with it. For example, a fly-out navigation.

Read

Lea Verou · Jun 5, 2020

Hybrid positioning with CSS variables and max()

Notice how the navigation on the left behaves wrt scrolling: It’s like absolute at first that becomes fixed once the header scrolls out of the viewport. One of my side projects these days is a color space agnostic color conversion & manipulation library, which I’m developing together with my husband, Chris Lilley (you.

Read

iA · iA Inc · Jan 30, 2026

The 2025 iA Award Winners

And the winners this year are...

Read

Manuel Matuzovic · Jan 7, 2021

More or less burger-less navigation

For your and my inspiration: A collection of websites that don’t hide the navigation on mobile behind a burger/menu button. Show some, hide the rest Single row, centered Single row, space-between Single row, scrollable Multiple rows Vertical navigation Single row, additional icons Multiple rows, aligned to the right M.

Read

iA · iA Inc · Apr 22, 2025

iA Wins Red Dot Best of Best

The highest distinction for pioneering designs

Read

EightShapes · Dan Brown · Jul 7, 2023

Enterprise products, an information architect’s perspective

Joseph Chan on Unsplash Series: information architecture in digital products In the realm of digital products, some cater specifically to the enterprise. As I continue my exploration of Product IA, I’ll focus on these kinds of products because of their acute information architecture challenges. Let’s first define what.

Read

Slack Design · lcarmen2 · Oct 25, 2023

How our biggest redesign yet came to be

The timing was right. We were adding in new features like huddles, canvases, lists, and others into a UI system that was originally designed solely for messaging capabilities. Meanwhile, research showed users on the biggest and most active teams were struggling to stay on top of the basics. Our product navigation was.

Read

UX Movement · anthony · Nov 22, 2024

How to Design a Sidebar That Saves Screen Space

Screen space on a desktop interface is more important than you think. Most designers take it for granted because a desktop screen contains so much space. However, when it comes to data display, every pixel counts. A sidebar can occupy a lot of width space and diminish the content area. As a result, users will […] The.

Read

CSS Wizardry · 3d

Unattributed Navigation Overhead (UNO) Is Underrated

Unattributed Navigation Overhead exposes the part of Time to First Byte that Navigation Timing cannot explain, including hidden cross-origin redirects.

Read

Practice this