Five killer ways to use fixed navigation

By Matthew Smith on June 27, 2011 | 3 comments

When it comes to navigation on your site, one of the major questions you're likely to ask yourself is whether to fix, or not to fix. Matthew Smith looks at five top examples of fixed nav systems

Just as in most desktop and many web applications, a fixed-point navigation allows users to keep their tools in front of them at all times. This enables the user to operate in their canvas or move about the app with far greater ease. Whether a navigation bar is steady while the navigation points change (as is the case in iOS interfaces) or a firmly fixed list of items in a desktop toolbar, it can be a comforting thing to know that some elements of an interface stay the same while browsing a website or app.

These same principles can make for a helpful and enjoyable experience when using a website as well. Helpful for the reasons stated above, and enjoyable when employed tactfully – with animations or clever transitions. In effect, it can turn an entire site into a kind of tabbed slideshow that encourages your users to interact with it in a much more app-like fashion.

There are some precautions that you’ll need to take when considering a fixed navigation, however. If you or your client are concerned about screen real estate, fixed navigation can be a poor choice. This is because it occupies a consistent amount of space on the page, effectively reducing the size of your viewport.

For this reason, some designers prefer to place the fixed navigation on the top or bottom portions of the page. By doing this, and by using a transparent background, you can create the sense that the size of your viewport hasn’t changed all that much, and maintain the best qualities of a fixed navigation.

Make sure your navigation is clearly visible and distinct if you allow content to scroll behind it; losing the navigation in the midst of content defeats the purpose entirely.

Here are five examples of some the finest fixed navigation sites you'll find on the web today, and hopefully they can inform and inspire your next project.

Five examples to check out

1. Netontwerp An unusual example with a tight square grid and a centred and fixed layout is found at the home of Belgian designer Simon Wuyts (www.netontwerp.com). It’s a great solution for a small site.

2. The Black Estate The Black Estate is a New Zealand wine producer and its one-page site (www.blackestate.co.nz) uses a vertical fixed nav with a transparent background. The content smoothly transitions behind the nav, so you’re never lost.

3. Parachute A perfect example of a left-fixed navigation for a small ecommerce site is found at the online home of T-shirt vendor Parachute (www.madebyparachute.com). The site starts at the top with the brand above and filter below. When you scroll, the filter takes pole position.

4. Fat-Man Collective This site - for the European design collective Fat-Man Collective - ticks a number of boxes. Not only does it employ a great fixed nav, but it's also one of the best single-page sites we've seen. The quirky CG fat man - who stands above the nav, walking and jumping as you navigate the site - tops off this fantastic website. (EDIT: The site doesn't perform particularly well on mobile devices, and thanks to Nick Zwinggi for the heads up.)

5. Campaign Monitor A great fixed nav with shifting active states is used at campaignmonitor.com/templates, a gallery of email templates. It stays out of the way, but lets you jump around at will.

If there's a fixed nav site you'd like to add, why not mention it in the comments? I'd love to see other examples of sites using this oft overlooked navigational device in a compelling way!

3 comments

Comment: 1

Some really good examples here of effective fixed navigation's. I think if not implemented properly having a fixed navigation can have a negative effect on a sites usability rather than enhance it. I've seen some sites that use fixed navigation's in a similar style to the Black Estate site but the navigation actual covers parts of the main content. I particularly like the Fat-Man Collective as the fixed navigation seems perfectly natural and not jittery like some fixed navigation's I've seen.

Report abuse

Comment: 2

Anyone know of any examples/tutorials of how to implement the type of nav that changes to fixed position after the page scroll reaches a certain point (once the nav reaches the top of the screen)?