A good website menu lets visitors find what they want without guessing: usually 5-7 main items, plain and familiar labels, a visible primary call to action, and navigation that works smoothly on mobile, by keyboard and with a screen reader. Menu design is not decoration; it is the visible face of the site's information architecture.
After the homepage, the menu is one of the places visitors look at most. A confusing menu means even the best content goes unfound and ready-to-buy visitors leave. This article covers the number of items, labels, mega menus, mobile menus, sticky headers, footer navigation and breadcrumbs, and menu accessibility.
How many items should a website menu have?
A website menu generally works well with 5-7 main items. This is a practical guideline rather than a strict rule: as the number of items grows, it gets harder for visitors to scan the menu and find the right option, and each item gets less attention. For most service businesses, services, about, work, blog and contact form a sufficient core.
- —Identify the pages visitors look for most: top pages in Analytics and on-site search data are a good starting point.
- —Group similar pages under one parent item; for example, list individual services under 'Services' rather than giving each its own menu item.
- —Move pages that do not need to be in the main menu (privacy, cookie policy, careers) to the footer.
- —Order items by importance; visitors tend to notice the first and last items most, so contact or the main action fits well at the end.
How should menu labels be written?
Menu labels should use plain, familiar words so that visitors can predict what they will find before they click. Everyday terms such as 'Services', 'Pricing' and 'Contact' always work better than creative but vague labels such as 'Discover', 'Our World' or 'Solution Universe'.
- —Keep them short: one or two words is enough.
- —Use the visitor's language: pick the word customers search for rather than industry jargon.
- —Be consistent: the menu label and the title of the page it opens should match or be very close.
- —Avoid many items starting with the same word: labels like 'Corporate', 'Corporate Solutions' and 'Corporate Support' are hard to scan.
When should you use a mega menu?
A mega menu should be used when many sub-pages need to be grouped under one parent item, for example on an e-commerce site with dozens of categories or a large corporate site with many service and industry pages. On a business site with five or six pages, a mega menu adds needless complexity; a simple dropdown is enough.
If you use a mega menu, group the sub-items under headings, keep each group to a few items, and make sure the menu opens on click and by keyboard, not only on mouse hover. A mega menu cannot be shown the same way on mobile; there the groups usually become expandable sections (an accordion).
On mobile: hamburger menu or visible tab bar?
On mobile, a hamburger menu is a practical, space-saving solution for sites with many pages, but because its items are hidden they get discovered less. On sites with a few frequently used sections, a visible tab bar at the bottom or top of the screen keeps the most important pages within reach at all times.
- —A hamburger menu suits sites with many pages where visitors mostly land directly on an inner page from Google.
- —A visible tab bar suits sites with 3-5 main sections that visitors switch between often.
- —A hybrid approach: keep the main action button (call, WhatsApp or quote) always visible next to the hamburger menu.
- —Adding the word 'Menu' next to the hamburger icon improves clarity, especially for less tech-savvy visitors.
How should you use a sticky header and a CTA in the menu?
A sticky header keeps the menu and the primary call-to-action button at the top of the screen as the user scrolls, which makes it easier to get in touch on long pages. A sticky header should stay slim, take up only a small part of the screen on mobile, and the call-to-action button in it should stand out visually from the other items.
The menu should contain a single call-to-action button representing the business's main goal, such as 'Get a quote', 'Book' or 'WhatsApp'. It should be designed as a button set apart by colour or a border, not as plain text like the other items. On the 404 Ajans site, the WhatsApp button sits in the sticky header as a call to action distinct from the menu.
What are footer navigation and breadcrumbs for?
Footer navigation gathers pages that do not fit in the main menu but that visitors may look for, such as legal notices, careers, all services and service areas, at the bottom of the page. Breadcrumbs show visitors where they are in the site with a trail such as 'Home > Services > Web Design' and let them return to parent pages in one click.
Breadcrumbs are especially useful on sites with three or more levels, on e-commerce categories and on blogs. Used together with BreadcrumbList structured data, they also help search engines understand the page hierarchy. Footer and breadcrumb links also give important pages steady internal links.
How do you make a menu accessible?
A menu is accessible when it can be used by keyboard without a mouse, when screen readers can tell whether it is open or closed, and when its items are easy to select on touch screens. An accessible menu is more usable for everyone, not only people with disabilities, and is one of the basic expectations of the WCAG guidelines.
- —Mark up the menu with a nav element; if there is more than one menu, distinguish them with aria-label (for example 'Main menu', 'Footer menu').
- —Every item should be reachable with Tab, submenus should open with Enter or Space and close with Esc.
- —Hamburger and dropdown toggles should be real button elements that report their open or closed state with aria-expanded.
- —Do not hide the focus indicator; keyboard users need to see which item they are on.
- —Submenus should not open on mouse hover only; touch and keyboard users cannot hover.
- —Touch targets should be large enough: WCAG 2.2 AA requires at least 24x24 CSS pixels, and around 44 pixels is more comfortable in practice.
- —Add a 'Skip to content' link at the top of the page so keyboard users do not have to tab through the menu on every page.