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.
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…
In an already elegant, minimalist site, the navigation is also hidden off-screen behind a hamburger menu on the top right.
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.
Our sister brand hides its navigation ‘behind’ the right hand side of the page.
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.
The Spotify web player has all sorts of interesting navigation elements, including this hidden search tool, which overlaps the current navigation options.
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.
Further navigation beyond notifications is hidden in a menu accessed from the skinny nav-bar behind a thumbnail of your profile picture.
The slightly-mightier-than-micro blogging site hides its navigation in a similar way to Twitter, behind your little profile picture.
For more on web design from the blog, check out…