Is sticky navigation the next must-have for your website?

A new, although not conceptually innovative, technique is coming to web design, and it might be something you should consider as a development to your website, especially if you have quite a few pages which scroll down “below the fold”, as they say. It’s called “sticky navigation” and it makes a lot of sense. Imagine you’re using, say, Microsoft Word, with all its menus and buttons across the top of the page. Now imagine you scrolled down the document, and those menus and buttons all disappeared off the top of the screen. That would be unthinkable, right? But it’s what happens with web pages. As users scroll down your pages, your navigation across the top (and indeed down the side) will probably disappear off screen, out of sight. This is avoided with the use of “sticky menus” across the top, such as in this example (scroll down the page and watch the menu at the top as you do so).

The web designers’ site Smashing magazine has a terrific article on the subject called Sticky Menus Are Quicker To Navigate which starts off with a usability study demonstrating a clear preference for this system from users.

Don’t expect your web designer to be able to implement this on your site overnight. Putting navigation at the very top of the page might not be what you want, and may involve design compromises. Some sticky elements get, well, stuck as the user scrolls down the page, so they need to be coded and tested well. And there might be issues with mobile devices. But this is one design improvement which can be applied to existing sites without requiring a complete redesign. You might like to think about it.

Discussion

  1. Gary Aspinall

    I really like sticky navigation, am I too lazy to scroll up? I will probably use it on my future websites.

    Thanks for the article Chris, I’ve seen this used on many sites and wondered what it was called, until now.

  2. Tim

    I’m not sure why but the example feels quite dated? Further depth via parrallax scrolling based design may remove the ‘frames’ feel resulting from this technique?

    I saw a great example a few weeks ago where the navigation scrolls off page and returns if the user scrolls up a little. This is another alternate to avoid the frames feel.

  3. john Bennett

    These types of menu are freely available as “kits”. Just look on Dynamicdrive.com and look at OmniSlide for one. Static positioning, slides in/out when mouse over so its doesn’t steal screen acreage. Whether it will have sufficient flexibility to handle multiple levels would need checking.

    PS I’m not championing it,just reporting it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>