When are there too many things in your main navigation? I usually say that a main nav should have no more than 5 main elements. This is a number that our brains can easily scan and categorize.
However, there’s another reason for reducing the number of menu items on a main navigation area. There is only so much room on the viewer’s screen. It’s a physical grid of dots (pixels). Each screen is only XXX pixels wide and YYY pixels tall.
If your menu has too many items in it, the menu will wrap around to a new row below the navigation menu and visually break your header design.
At best, you will have a single orphaned menu item sitting alone in a row, looking lost and alone. At worst, you may have other design elements cascading down the page in seemingly random locations.
Let’s look at some statistics that you can easily get from an online service, free of charge, to help you make these tough layout and design decisions in an objective manner.
All of my clients are in the U.S.A., their target markets are regional, local, or even hyper-local in geographic scope. So, I look at stats for screen sizes in the USA only. Other countries have different screen sizes, having them in our data would mess with the percentages.
In this article I am going to look at desktop displays only, but, I would normally bring up data for mobile and tablet to review also. I’m using this page at StatCounter.com to get display size stats.
The 5 most popular display sizes as of February 2022 in this chart are:
- 1920×1080 @20.79%
- 1366×768 @13.97%
- 1440×900 @8.64%
- 1536×864 @7.97%
- 1280×720 @4.81%
These are the viewport/display sizes that you must test your design against and see where it falls apart. When you find breaking points, you must move items out of the main nav into a sub-menu, secondary nav, or footer nav location.
How you decide what menu items to move is a whole different discussion… 😉
Depending upon your target market some particular display sizes might even be more popular than shown in the general population statistics.
For example, if you are targeting designers, developers, architects, they will have at a minimum a 1920×1080 display.
But, if you are targeting older or less tech-savvy people you will find that they skew towards the cheaper screens like 1280×720 or 1440×900.
A BLAST FROM THE PAST:
I used to help accountants with formatting complex spreadsheets. They always wanted to print them on one sheet of paper.
The amount of data on the spreadsheet was too much to fit on one sheet of paper, and I would tell them that, but inevitably they would try it. That’s when they would find that the font was shrunk to 2pt size and it was unreadable.
Same problem. Too much info, not enough space to see it all.