We published our 17 crucial web design trends for 2015 a couple of weeks ago, and this is part of a series of posts looking at each trend in more depth.

This week, the thin permanent menus found across the very top of larger websites we have decided to call 'super-navigation'.

These help bring unity, allow consistent navigation across multiple pages and are a handy place to present alerts and a search bar.

They're also much tidier and take up less space than the traditional layout of having a large logo at the top of the page with navigation options beneath.

This practice can end up filling a large proportion of a homepage, which leads to further problems of how to adapt the navigation when exploring other parts of the site. 

Here are 11 neater examples...

Facebook

Let’s start with the most obvious, Facebook’s permanent thin strip of blue where it houses alerts, a search bar and other navigation options no matter where on the platform you go.

The Guardian

The long-promised revamp of The Guardian’s website will involve a permanent upper menu bar neatly housing navigation, search and all of its subdomains.

As it’s a responsive design, this shrinks down based on the screen size, reallocating pages within the hamburger menu.

Inbox

Gmail’s new email app keeps its navigation simple and icon-based, with a high priority on search over email folders.

Flickr

The photo-sharing platform keeps everything tidy with simple drop-down menus that open when you hover over them.

Mashable

Mashable maintains its categories here and also highlights its social channels. There’s also a great long-form search box that appears when hovering - it manages not to take up too much room and feels entirely organic to the menu.

Booking.com

This menu is more for presenting alerts, and perhaps a super-navigation bar isn’t ever going to serve a travel site particularly well as there’s so much search criteria needed, but it’s great for community admin and providing access to your favourites list.

Apple

Possibly the only ecommerce site featured here. Apple uses its menu to specifically guide people towards product homepages and the search button opens up nicely within the bar.

PayPal

Access all of PayPal’s key features from its newly designed navigation menu, featuring search and alert notifications.

Twitter

Social seems to be one of the key places to find good examples of super-navigation. Twitter has recently moved its ‘create tweet’ button up to here too.

Marketing Week

Our sister publication Marketing Week has undergone a recent overhaul and now features this simple menu which stays pinned to the top of your screen as you scroll up and down the page.

Econsultancy

Finally it would be remiss of me not to mention our own website overhaul and its navigation bar, featuring a super-powerful search tool and giant mega-navs.

Now this is still a work in progress, and you can read all about the redesign process here in Econsultancy’s new responsive design, so please do tell us what you think. 

Christopher Ratcliff

Published 22 January, 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 (1)

Morgan Jones

Morgan Jones, Digital Manager at Freestone Creative

The ongoing challenge, in producing minimalist navigation such as these examples, is that it's got to make sense to new and existing users. This is where effective language plays an important part as you don't really want to rely on user inference to navigate the site effectively. With that in mind, Twitter & Marketing Week have successfully distilled their content to into only four (five) words, but you know exactly what you're going to get if you click on them. Nice!

almost 3 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.