Website Navigation Menu Design That Visitors Can Actually Use
A good navigation menu is visible, uses familiar words, shows where the visitor is and is easy to tap or click. It helps people find what they came for and tells them at a glance what your site offers. Most menu problems come from hiding it, cluttering it or getting clever with it.
What the menu is for
A menu has two jobs. It lets visitors move around the site, and it communicates what the site contains. A visitor who lands on a page from a search result often looks at the menu first to understand where they are. If the menu is confusing, hard to find or hard to use, people leave without exploring.
Keep it visible and where people expect it
- Show it on larger screens. A menu hidden behind an icon on a desktop removes both the choices and the clue to what the site offers. Reserve the icon version for small screens.
- Put it at the top. On websites, primary navigation belongs in the header. Utility links, such as login, sit above or beside it, and secondary categories belong in the footer.
- Make the text readable. Low-contrast menus, such as light letters on a photo, are hard to find. See the contrast guide.
- Keep open menus from taking over. A menu that covers the whole screen on a big display feels like a new page. It should overlay the content.
Write clear labels
Labels do most of the work. Use plain, familiar words and avoid jargon, invented terms and vague titles such as "Solutions" or "Resources" when something more exact exists. Start each label with the key word so a scanning eye can pick it out, and left-align vertical menus. Keep the number of main items modest, so each one stays noticeable. If the list grows long, a grouped submenu or a separate section is better than a longer bar.
Show where the visitor is
Many visitors arrive on an inner page. Highlight the current section in the menu, and on larger sites add breadcrumbs, a trail of links that shows the path back up. Local navigation, a list of related pages in the same section, lets visitors browse sideways without climbing back to the top.
Make it easy on touch screens
- Make links large enough to tap, with space between them.
- Mark items that open a submenu with an arrow or caret.
- Open submenus on click or tap, not only on hover, because hover does not exist on touch screens and is difficult with a keyboard.
- Avoid cascading menus that open sideways at each level. A larger panel or a landing page for the section works better.
These details connect to the layout work in the responsive design guide.
Sticky menus and long pages
On a long page, a menu that stays at the top while the visitor scrolls saves the trip back up. Keep a sticky bar slim so it does not eat the screen on a phone, and test that it does not cover anchors or form fields.
Avoid gimmicks
Unusual menus can look striking and still frustrate. Hidden menus, spinning effects and icons without labels make people stop and think. Familiar patterns win because visitors do not have to learn them. New patterns occasionally become the new standard, as the icon for a small-screen menu once did, but most sites are better served by the common approach.
How to plan a menu for a small site
- List all the pages you have or plan to have.
- Group them by what a visitor wants to do, such as see work, learn about you or get in touch.
- Name each group with a plain word.
- Keep the main bar to the essential groups and move the rest to the footer.
- Give the main action, such as contacting you, a distinct place in the bar.
- Test with a few people, asking where they would click to find a specific thing.
Menus and page addresses
The menu structure and the page addresses should agree. If a page sits under a section in the menu, its address should reflect it. Matching the two makes the site easier to understand and to maintain, as described in the URL structure guide.
A simple example for a portfolio site
A creator with a homepage, three projects, an about page and a contact form does not need a complicated structure. A clear bar could hold four items: Work, About, Journal and Contact. Work opens a page that lists the projects, so projects do not crowd the bar. The contact item can be styled as a button so it stands out. In the footer, repeat the main links and add smaller ones such as the privacy notice. Every item is in plain language, and a visitor can predict what lies behind each one before clicking.
Common mistakes
- Naming items after your internal structure. Visitors do not know that a team calls its work "Solutions". Name pages after what the visitor wants.
- Too many levels. Menus within menus are hard to use with a finger or a keyboard.
- Different menus on different pages without a reason. Consistency makes a site feel reliable.
- Icons without words. Symbols are only clear when everyone shares the meaning.
- No way back. A logo that links to the homepage and a visible current-page marker solve most orientation problems.
FAQ
Is a hamburger menu bad?
It is fine on small screens, where space is limited. On large screens it hides useful information.
How many menu items are too many?
There is no fixed number. If visitors have to read every item to find one, the bar is too long. Group related items.
Should I use a mega menu?
For a large site with many sections, a well-organized large panel can help. A small site rarely needs one.
Where should the contact button go?
Put it in the header, in a place that stands out from the other items. A footer link is a useful second location.
Do I need a search box?
Useful on large sites with lots of content. A small portfolio can do without it.
Your next step: ask two people to find a specific page on your site while you watch, without helping. Note where they hesitate and fix the first label that confuses them.