Thoughts on locked navigations?

8 Mar 2011 - 3:28pm
4 years ago
10 replies
5115 reads
Thalith Nasir

Hello everyone!

We're in the middle of a site redesign and currently exploring navigation options. 

One option is a navigation thats locked to the bottom of a page with sub-menus that fly up. 

I don't often find menus like these and I'm trying to figure out why! :)

I know and has a navigation that locks to the top of the page, which are more recent examples. However, haven't really found navigations glued to the bottom. 

Would love your thoughts on this. 

Thanks in advance!

-Thalith Nasir


8 Mar 2011 - 3:44pm
Chad Mortensen

My first thoughts on why not to do this would be that a user could interpret the bottom nav as a false bottom of the page and not attempt to scroll down to see more. Navigation is also typically at the top of the page so you're going against a common web design pattern which would probably throw off some people. If you feel that your user base is ready to push the boundaries of what's normal then it could work as long as you're content on the pages flows behind the fixed bottom nav in a way that makes it feel like there's more down below. 

8 Mar 2011 - 10:36pm
Thalith Nasir

Thanks for the reply. 

Good points. The way the content is structured and laid out, it would be clear that the nav is not at the bottom of the page (unless of course it is at the bottom of the page!). 
I also do think that people generally scroll so that wasn't my worry. 

What I might be concerned about is whether a locked nav poses to be more of a distraction over the convenience it provides. Don't want people to be hyper-aware of a navigation bar when they should be focused on the content. 

Wonder if I answered my own question. Oh reflection!



8 Mar 2011 - 3:59pm

I second Chad.

The only time I've found fixed nav useful for myself is when a certain features/tools/links are always available on the Left side. This does not interfere with my scrolling eyes/mouse and keeps things handy. Readability is a good example:


8 Mar 2011 - 10:39pm
Thalith Nasir

I liked the example of Readability (started using it thanks to you). Really makes sense in that context. Wondering if it can be used as a primary navigation.....



8 Mar 2011 - 6:12pm

If you are looking for examples, Alltop and Facebook (chat menu) both use fixed-bottom menus. However, these are both more so secondary tools/actions than main navigation.

Top or side navigation is the norm for web sites and people are more familiar with it as a result but I wouldn't discount your option. If you have a reason to try fixed bottom flyouts try testing the design with your current audience first to see how it performs. After all, bottom navigation isn't completely unfamiliar; Windows and Apple's OS's operate this way and so do other mobile OS's.


10 Mar 2011 - 5:07am

It is a matter of Information Archtecture: the most important things are at the top of your screen. Having a toolbar at the bottom interprets as "It's OK if you don't ever see this". If this is your main navigation it's not a good idea to have it there.

Having said that, a set of tools that maybe used at any time during the User's visit (think Social tools, chat et al) can be easily placed there but you have to find a gentle way to point that out to the User - like a dock that comes initialy expanded and it promptly autocollapses or a bubble.

11 Mar 2011 - 2:13pm

Strongly agree with this. Demoting the most important navigation sounds like a bad idea - with the possible exception that the site has a niche user-base. For example, if people go to a site knowing it's going to be offbeat, putting the main nav at the bottom might fit in with the site and be perfectly usable for the user base.

But if it's a more generalised site - I'm not seeing a user benefit for the change.

14 Mar 2011 - 8:31am
2011 a nice example of where this works..

18 Mar 2011 - 5:04am

One of my favorite implementations of this evolving pattern is I hesitate to call it "locking", however, as unlike Vogue, it has a very effaced mode for scrolling/viewing, and then an expanded view (with a very classy animation, imo) on hover.

I think this two-state approach is great for a number of reasons:

- adapted to different use cases (read, navigate)

- clever effect is noticeable, easy to learn, and enhances brand

- optimizes real estate (vis-a-vis Vogue)

Facebook's bottom bar is more utilities than nav...

One thing to keep in mind with any top-locked nav is that it's going to constrain, or at least make problematic, the use of any page-wide inlay or overlay notifications.


1 Nov 2011 - 6:38pm

I agree.  The coolhunting navigation is awesome.  How do you think they did that.

I've been looking on to see the technology they used, but I'm a novice web developer so I really have no idea what it is I'm looking for.  Any thoughts?


Syndicate content Get the feed