Opinions on top navigation e-commerce sites (as opposed to side nav)

I’m creating some mock-ups for my employer and just figured I’d get some opinions from fellow designers. I really like the top navigation layout, but how effective is it for shopping sites these days? Anything special to consider? I’d really like to have the left column available for other uses, rather than a catalog listing. But if it’s been proven to be more effective, I’ll run with it.

It depends entirely on how deep your navigation structure is. Look at http://kohls.com. They have their departments at the top, but then within a department it produces a vertical navigation list on the left.

For Kohls (and many similar large retailers), this is the only option as there are too many categories to fit into the top header.

From a usability perspective, it’s generally harder to scan across a row, than down a column. But of course if you have all your categories at the top, then they’ll always be “above the fold”.

The key here is striking a balance between how many categories you want to show initially, and how far you want to make your user drill down to get to the sub categories. For me, if I can’t fit all categories into single row, then I have too many. I will overwhelm my user with too many options. I would rather intelligently group categories together and require my users to make one extra click to view the sub-categories and sub-sub-categories, than to Craigs List them to death the instant they load the page.


That said, make your primary navigation horizontal, and keep it to a single row. Then if you have too many sub-categories to list in a second row under the primary navigation, then throw them in a vertical list on the left (ordered alphabetically, with the top 3-5 most important ones on top, visually separated from the rest!!!)

The key is keeping the navigation consistent, and for the love of god don’t duplicate the navigation on the top AND the left :stuck_out_tongue:

Good points. I figured if I went with a top navigation, I’d use a “mega menu” drop down so that all categories/sub categories could be listed on a hover (in order to reduce clicks). And the sub cats would also be listed with thumbnails in a grid style in the main content column as well depending on what page you’re viewing.