It's becoming more popular for websites to hide its navigation off screen, only revealing a menu when you interact with an element.

The interaction can be a click or a hover, the element is normally a hamburger menu, but occasionally its text or symbol based. Either way this practice is a good way to clean up the clutter of your website.

Here are 10 examples, each providing a slightly different take on the trend.

For more design trends from the blog, check out our mega round-up 17 top web design trends of 2015.

Inbox

Google’s new email app Inbox hides all of your folders in a hamburger menu top left…

The navigation then slides across as if it were off-screen…

Squarespace

In an already elegant, minimalist site, the navigation is also hidden off-screen behind a hamburger menu on the top right.

Guardian

Since The Guardian’s site redesign earlier in the year, most of the navigation has been hidden behind this always-accessible hamburger menu…

Revealing a wider world of categories and sub-categories.

Marketing Week

Our sister brand hides its navigation ‘behind’ the right hand side of the page.

Awesome Shop

Target’s ecommerce store powered entirely by Pinterest has all of its product filters sliding in smoothly from the left hand side.

House of Fraser

You can browse by shop or department on the top navigation bar, each menu appearing as you hover each hamburger.

Spotify

The Spotify web player has all sorts of interesting navigation elements, including this hidden search tool, which overlaps the current  navigation options.

Mondo

Mondo has a beautiful responsive site, which lets images of its products do all the talking. Its navigation is hidden under the simple ‘shop’ text.

Twitter

Further navigation beyond notifications is hidden in a menu accessed from the skinny nav-bar behind a thumbnail of your profile picture.

Medium

The slightly-mightier-than-micro blogging site hides its navigation in a similar way to Twitter, behind your little profile picture.

Further reading

For more on web design from the blog, check out…

Christopher Ratcliff

Published 16 March, 2015 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

You might be interested in

Comments (13)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Adrian Mills, Marketing Manager at Cybertill

With mobile there is a need for 'hidden' menus but for desktop version of responsive sites I think it is a case of being too design lead. With every website usability must be priority and these hidden menus add another click for the users to make and find.

over 2 years ago

David Gilroy

David Gilroy, Director of Stuff & Things at Conscious Solutions

Here's our take on it. A hamburger in the top right hand corner of our newly designed site http://www.conscious.co.uk

over 2 years ago

Avatar-blank-50x50

Tony Edey, . at RCL Cruises Ltd

I'd love to see the consumer research behind these design decisions to hide all menu options behind a hamburger for non-mobile devices. Whilst a lot of consumers will be familiar with hamburger menus, on larger screens they don't make the best use of the screen real- estate available and therefore arguably add more clicks to get where you're going. Also, I personally find the Spotify menu somewhat clunky.

In lab testing I've done with Joe Public I've repeatedly been gobsmacked by user 'stupidity' and lack of knowledge of basic web principals. UI designers are potentially running the risk of designing something they think is obvious, that everyone knows and understands, but my experience says that's very often a risky assumption. So are these UI designs alienating a chunk of the audience who find the navigation frustrating?

Like I said, I'd love to see the consumer research behind these designs that hide everything in a hamburger, and see this labs tested with hamburger menu vs 'traditional' navigation across the top style. Hamburger makes sense for mobile 100%, but desktop and tablet...?

The clean look of the hamburger only page is nice, but is it a step backwards in usability?

over 2 years ago

Christopher Ratcliff

Christopher Ratcliff, Editor at Methods Unsound / Search Engine Watch

@Adrian & @Tony - You could both be absolutely right. Certainly the extra click can be a barrier, I certainly agree that the Spotify UX is clunky and that intuitiveness and usability are far more important than aesthetic design. A significant amount of A/B testing would have to be done to see if these were worth implementing or not. However I do think it's very interesting to look at innovative/different navigation designs even if it's just purely for inspiration.

over 2 years ago

Avatar-blank-50x50

Tony Edey, . at RCL Cruises Ltd

@Christopher: Absolutely, and it may be that these menus are 'better' across all interaction KPIs. Personally I'm a fan of the blended approach such that hides less important menu options behind an inline hamburger as the screen/browser size decreases.

over 2 years ago

Avatar-blank-50x50

Mike Smith, Director of Ecommerce at Diet Chef Ltd

We implemented a similar menu icon when redesigning our site to be responsive. It comes in when the screen is too small for the full menu. We felt that our customers wouldn't necessarily understand what it was, so we put the word "menu" next to it. Hopefully in time the hamburger icon will be widely used and understood.
www.dietchef.co.uk

over 2 years ago

Hugh Gage

Hugh Gage, OWNER at engage digital ltd

AS Christopher says, there must have been some testing to assess the impact of hamburger menus on desktop sites. Perhaps the original decision was taken based on the preferred platform i.e. for Spotify I would guess that this will be mobile or tablet so if most users are used to that UI then it could make sense to carry is across to the desktop site as well.

over 2 years ago

Avatar-blank-50x50

Adrian Branch, Director at Blue Gap Search

David Gilroy, sorry to say, but that menu deployment is a mess. Have you noticed a bigger bounce or dropoff since it was implemented?

over 2 years ago

Sarah Alder

Sarah Alder, Managing Director at Cranmore Digital Consulting Ltd

That Spotify one really irritates me, which makes me wonder if the other ones irritate people too. Do you wonderful folks at Econsultancy have any stats on what users think of hidden menus?

over 2 years ago

Ivan Burmistrov

Ivan Burmistrov, Usability Expert at interUX Usability Engineering Studio OÜ

This kind of "decluttering" the screens is an obvious mistake. Main menu is not a clutter, this is a primary instrument of navigating a website.

over 2 years ago

Will Rogers

Will Rogers, Head of Digital Marketing at VocaLink

I'm a bit of a fan personally. UX can be enhanced, rather than hindered, by allowing the user to "discover" things, but it needs to be done right. Quite like the idea of stripping stuff back to maximise desktop impact and taking the menu off-screen - bit like Adobe do. So you treat the menu as separate to the real-estate that can be dialed up/down when necessary.

over 2 years ago

Ivan Burmistrov

Ivan Burmistrov, Usability Expert at interUX Usability Engineering Studio OÜ

@Will Rogers

Could you show us a good example of when allowing a user to "discover" things enhances UX, please?

over 2 years ago

Will Rogers

Will Rogers, Head of Digital Marketing at VocaLink

Hey Ivan - No direct examples to hand, just anecdotal feedback from users testing out different layouts and preferring less conventional ideas. Perhaps the word discover was misplaced - clearly if folks have to go hunting high and low for the info they want then you're doing it wrong.

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.