Oct 09
2013

Interface design trends - Sticky navbars

Sticky navigation...

Until a few years ago this design element was most commonly seen inside desktop applications, but recently I've noticed them appearing more frequently on common web pages.

While a lot of them are quite good looking it's not all about appearances. For instance, did you know that sticky menus are easier for your guests to use than ones that scroll off the page?

Sticky elements are areas of content that "stick" inside your browser as you scroll.

Usually this attention-focusing technique is reserved for navigation menus, but alternatively can be used for other things you'd like to feature. (Look to the right of this article for a perfect example.) If you're a Facebook or Twitter user you've probably encountered this trend already without paying much attention to it.

Here are three remarkable examples that have caught my eye...

1 - Google Plus

Plenty has been written about Google's new design direction already, but one item I'm fascinated with is their "Google Bar" which really shines on Google+.

What makes this sticky nav exceptional is the way that it transforms from large-to-small. You'll notice that the first navbar is quite tall, displaying the full Google logo and search box.

As you scroll down the page, the navbar animates to a smaller version, pushing a small Google logo in from the left, and squishing the Home menu. On the right-hand side the "Hangouts" section gets smaller, and a notification bell appears.

The effect is subtle but impressive, feeling very slick and refined. To see it in action head over to Google+ and follow me while you're there.

2 - Slashdot

Another great example of the large-to-small navbar transition is featured on the redesigned version of Slashdot.

The effect here isn't as well executed as Google+, but they do feature one additional twist which makes this implementation unique. By combining sticky navigation with a mega menu they're ensuring a higher probability that visitors can get where they're trying to go.

Additionally, as you scroll they're adding a subtle drop-shadow effect to the navbar to make it appear to float over the content. Nice touch.

3 - Ars Technica

Ars Technica is the final example of this large-to-small transition, as their navigation bar starts out quite tall, containing a full logo and banner advertisement.

Again, as you scroll the bar squishes, only displaying relevant items that you're most likely to need while navigating their site.

You'll also notice Ars is featuring a mega menu here, which have been proven to be much more usable than standard drop-downs.

Implementation

So how do you get these sticky navbars on your site? The easiest way would be to add a bit of CSS code, which would look something like this depending on your HTML markup...

  div#header {
    position: fixed;
    top: 0px;
    height: 100px;
  }
  div#content {
    margin-top: 110px;
  }

This will get you something stuck to the page, but there are a number of jQuery solutions that are a bit more advanced. You'll obviously need to do some additional scripting if you a slick transition effect like Google.

Sticky navigation usability

Hyrum Denney wrote a wonderful article on the usability of sticky navigation menus where he tested two nearly idendical websites. The only difference? Sticky navigation.

His usability test found...

  • Sticky menus are 22% quicker to navigate than the alternative
  • 100% of people tested preferred sticky menus without knowing why

So not only are these navigation items great looking, they also perform quite well.

Conclusion

If you're a website owner that features a global navigation bar, I strongly urge you to consider the benefits offered by this latest interface design trend. Not only will your users be impressed by it, but you'll make it easier for them to navigate your site.

Have you spotted other great examples of sticky nav?

Let me know in the comments below.

Written by Seth B

As Principal of Subimage LLC, Seth spends most of his days improving Cashboard. Occasionally he finds time to write about music, design, startups, and technology.

Tagged: around the web, design, interface, trends