Docking Navigation Bars – Web Navigation Trend

I a previous post I pointed to a recent trend of having a static navigation bar at the bottom of the page–the static footer bar. This navigation mechanism is usually a type of utility navigation or tool bar of sorts.

A conversation over on the IxDA discussion board highlights a similar technique that locks a navigation at the top of the screen. I call these docking navigation bars. One example discussed comes from Here’s how it works:

A normal main navigation bar is presented towards the top of the page inline below the site logo, as shown in the image below:

Figure 1: homepage, at the very top of page.

Then, as you scroll down the page, there will be a point where this main navigation bar is no longer visible. At this moment the bar docks to the top of page, allowing the content to scroll behind it. The docked navigation then stays visible and accessible as you scroll the entire page, which on is fairly long. Figure 2 shows the docked main navigation bar as I scrolled about half way down the page.

Figure 2: homepage with a docked navigation bar

Comparing the two figures above, you may also notice that the logo is re-positioned from the top left to the right, and it is smaller as well. So the docked navigation bar is a slight variation of the main navigation bar, but consistent enough to be predictable.

Overall, docking navigation bars are a clever use of real estate: instead of the main navigation scrolling away completely, or instead of having a large fixed non-scrolling header area, the docked navigation bar provides ready access to the main areas of the site without intruding on the content too much. And if the docking doesn’t work on a specific browser or device (e.g., it didn’t seem to work on Safari on an iTouch), there’s not much of a disadvantage: the page still works as expected.

I also previously posted about scroll-activated dynamic menus. The docked navigation bar is also scroll-activated and fits in that category. But it’s more static and generally serves a different function than the examples I pointed to in that previous post.

My UX team tried docking navigation bars in the past–perhaps 5 years ago. So it’s not really new. But at that time, it was difficult to get the navigation bar to dock smoothly and consistently on all browsers. Back then, it tended to flicker as you continued to scroll. These days it seems much more feasible and very smooth. On there’s even a subtle animation as the navigation bar docks.

You can find other examples of this on the web, for sure, and I suspect we’ll see more of it as well as variations of docking navigation bars.

I don’t know of any usability studies around this technique, so if you have anything on it let me know. Overall, I personally don’t have an issue with the approach. But it would seem to make more sense with functional options that work together with the page content somehow. For instance, for a web app if you had options to print, copy to clipboard, and the ability to navigation from search term to search term in a docked navigation bar, that would make sense. For a fairly flat, static navigation like on GamePro I’m not sure of it’s real value.

There may be disadvantages with docking navigation bars, as well. For one, it’s an extra cost to program and maintain. But there might also be accessibility issues with it. (Of course, it could also be an advantage for accessibility). If you have insight into the accessibility of docking navigation bars let me know that as well.

Let me know your thoughts on the pros and cons of docking navigation bars.

To learn more about web navigation and IA in general, come to one of my workshops this year. I have two coming up–one in German in Hamburg and one in English in Sydney:

1. In GERMAN: UX Workshops in Hamburg by NetFlow, 11-12 April
a. Prinzipien der Informationsarchitektur
b. Elemente des Navigationsdesigns
Die online Anmeldung ist offen.

2. in ENGLISH: ANZ UX Workshops in Sydney, 28-29 April
See our website for more information and to register.

About Jim Kalbach

Head of Customer Experience at MURAL


  1. I’ve noticed the same thing for some time now – I’ve been calling it “pinned” elements but I can go for “docked” as well. has had it for well over a year. The new Techcrunch redesign from Code and Theory includes it as well. But its not just docked headers or nav – it can be any major horizontal page element. Visit a tripadvisor hotel page and scroll – a booking selector shows up at the top. Likewise in Gmail, where the toolbar docks both on the inbox and in reading, composing. I have a feeling it’s something we’ll be seeing more and more of. Personally, I dig it.

    • James Kalbach

      Thanks for the comment, Grandin. I did it too, and I suspect we’ll see more and more of this kind of thing–both at the top or bottom of pages.

  2. Pingback: My Interview on IATV Radio « Experiencing Information

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: