I think, therefore I blog

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. Since he left Australia in 2009, he has been living as a digital nomad in over 40 different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, and finding good food. Click here to subscribe to his weekly blog, or stalk him on Facebook and Twitter.

Leave a Comment

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

Comment posted by: Stefan, 8 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, 8 years ago
i like diagonal menus
Comment posted by: Dooglass, 8 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, 8 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, 9 years ago


Comment posted by: Georg, 9 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.

Join Over 1000 Subscribers

I write every Sunday about travel, psychology, and technology. Thousands of people just like you have already subscribed—and for good reason. It'll change your life. And it's free :)

Read a Good Book

“A spellbinding true story of love, passion and adventure. One can’t help but be swept away by 100% Love Guaranteed.” —Dr Tammie Matson, author of Elephant Dance.

Chat For A While

Your Vote Matters

Which animal will take over when humans go extinct?