8 amazing examples of mobile-first, responsive navigation

These great responsive websites go beyond the hamburger menu, and showcase really intuitive mobile navigation.

I recently posted a long rant about how mobile navigation is often neglected on responsive websites. To follow up on a more positive note, here are some examples of responsive navigation done right.

These great responsive websites don’t just fall back to hiding the entire navigation in a hamburger menu.

They instead use mobile-first thinking. They give the user a really clever navigation experience… even on tiny screens.

Clearleft

Screenshot of clearleft's website navigation.

Why it’s awesome

The site’s information architecture is super lean and concise. There are just four sections. They’ve kept it punchy ; there’s no filler here.

This lean approach to IA pays off at mobile. It means there’s no hiding needed at all. The entire contents of the site are visible the second you arrive.

Not only does this benefit discoverability, but it also means there’s no fancy JavaScript to slow the page down.

UX London 2017

Screenshot of UX London 2017's website navigation.

Why it’s awesome

Like Clearleft’s navigation, it’s short and sweet. This means that even at the mobile breakpoint the full navigation can be shown in all its glory.

UX London also highlights the main call to action (‘tickets’) so that it’s more visually prominent. This draws attention to this important section, even at mobile.

The BBC

Screenshot of The BBC's website navigation.

Why it’s awesome

The BBC is a service loaded with information. There’s just no way that everything could be shown in a single bar, even at the desktop breakpoint.

Rather than admitting defeat and hiding everything away, they’ve opted for the ‘greedy navigation’ technique.

Links are arranged in order of importance, from left-to-right. It displays as many links as there is space to show (depending on the user’s screen size). The remainder are tucked away behind a ‘more’ button.

This is a great way to prioritise when there’s just too navigation much to show at once, and consolidating the IA isn’t an option.

The Guardian

Screenshot of The Guardian's website navigation.

Why it’s awesome

Another great example of the ‘greedy navigation’ technique. The Guardian may have been the progenitors of this pattern.

Categories most important to their reader base (‘UK’, ‘World’, ‘Politics’, ‘Sport’) are arranged to the left. This means they’re always immediately visible, even at small mobile screens. The more secondary links are hidden away when there’s not enough space to show them.

NCSBN

Screenshot of NCSBN's website navigation.

Why it’s awesome

One more cool example of ‘greedy navigation’.

Whilst it’s not the prettiest implementation, it’s a good example of how a large amount of navigation can be prioritised at the mobile breakpoint.

The World Wildlife Fund

Screenshot of the WWF's website navigation.

Why it’s awesome

The WWF have emphasised their most important calls to action in the navigation (‘Donate’ and ‘Adopt’). This is reflected at the mobile breakpoint, too.

Whilst they use a hamburger menu to hide the detailed site contents, those two critical calls to action are still immediately visible and accessible.

Currys / PC World

Screenshot of the Curry PC World's website navigation.

Why it’s awesome

It might not be a glamorous brand, but Currys / PC World deserve a lot of respect.

They’re one of the first big retailers to truly push responsive design.

The mobile navigation keeps things simple, displaying recognisable icons to take the user directly into key site features.

GOV.UK

Screenshot of GOV.UK's website navigation.

Why it’s awesome

I couldn’t resist an excuse to praise this project. Rather than going for a traditional ‘navigation bar’, the GDS team have opted for an experience based around search and in-page links.

This keeps the site incredibly simple and lightweight.

Because there’s no complicated navigation bar to show, the mobile experience is just the same as desktop. A logo and a search bar. It’s fast and really intuitive. It’s an important example of how navigation starts with IA.

If you keep things simple when planning your site’s information structure, it can really pay off in your mobile experience.

Send me your examples!

Do you have any other showcases of great mobile navigation on responsive websites? Send me your examples, and I’ll feature them here.

Found this useful? Why not share it?

Chris Myhill, an incredibly handsome UX designer with over 7 years of experience

Chris Myhill

Chris is a freelance UX designer with over seven years of experience.

He’s worked on loads of different projects, using UX wizardry to help businesses make better products.

Learn more about Chris

← back