» » » »

Horizontal vs Vertical CSS Menus

By , 18 October 2007
Horizontal vs Vertical CSS Menus

Just yesterday I had a request from a customer to build a vertical menu down the side of the page in their design. I've always had a strong preference for horizontal menus, but have never really known exactly why. When trying to disuade my customer she naturally asked me this question: why?

Well, now I've thought about it I've come to the conclusion that there are some good reasons to go horizontal instead of vertical. Here are mine:

  • Being evenly distributed across the page, they create balance which makes you feel good.
  • They make better use of space as there is no vacuum below the menu which is common with vertical menus.
  • It's easier to read horizontally than vertically.
  • It's easier to move mouse side to side than vertically.
  • Submenus are easier to access as they have a larger area for the mouse to enter.
  • As people are generally lazy, the shorter menu items more common in horizontal menus are easier to read.

What do you think?

Horizontal vs Vertical CSS Menus

About Roger Keays

Horizontal vs Vertical CSS Menus

Roger Keays is an artist, an engineer, and a student of life. He has no fixed address and has left footprints on 40-something different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, the proper use of semicolons, and finding good food.

You May Also Like

Leave a Comment

Please visit https://rogerkeays.com/blog/horizontal-vs-vertical-css-menus to add your comments.

Comment posted by: Stefan, 16 years ago

Actually, study has shown that vertical listing (which a menu is) is easier to read and requires less eyemoment (less distraction). This is why parameters to functions should be put on separate lines if they exceed 3

Comment posted by: bob, 16 years ago
i like diagonal menus
Comment posted by: Dooglass, 16 years ago

I agree. Horizontal menu with drop down lists are by far the most efficient use of space and very easy and intuitive to navigate through. Vertical sidebars are a huge waste of content space that could be used for much better effect showing the actual content instead of links.

Comment posted by: Bruce, 17 years ago

It also depends upon the type of mouse - I use a track ball and the vertical is easier. Less movement needed.

I use vertical menus for fixed level - with grouping.

I use horizontal for menus requiring sub-menus

In some sites the top menu is the area menu and the vertical is the area navigation.

Problem with horizontals: need more movement to select, Fixed amount of room (vertical can scroll easier),  allow room below for additional info.

Comment posted by: Opairah, 17 years ago

Read.

Comment posted by: Georg, 17 years ago

Whether your preference for horizontal menus is a good one, or not, depends entirely on the layout of the page and the menu itself.