What navigation is for
Navigation answers three questions for a visitor: where am I, where can I go, and how do I get back? A menu mostly answers the second question. A breadcrumb trail answers the first and helps with the third. When both are clear, people spend less effort on the site itself and more on the content.
Navigation also gives search engines context. Links in menus and trails are ordinary links, so they show which pages belong to which sections. That is a side benefit, though. Design first for the person using the site.
Designing a main menu
A main menu should list the handful of places most visitors need, not every page you own. A few guidelines tend to work well:
- Keep it short. Somewhere around five to eight top-level items is a common, comfortable range, though there is no fixed rule.
- Use plain labels. “Pricing” or “Contact” beats a clever phrase. Visitors scan menus quickly and rely on familiar words.
- Group by what people want, not by how your company is organized. Visitors do not know or care about your internal departments.
- Keep the order and position consistent. The menu should look and behave the same on every page.
- Show the current section. Highlighting the active item reminds people where they are.
Dropdown menus can be useful when a section has many children, but they add complexity. Hover-only dropdowns are difficult on touch screens, and nested flyouts that require precise mouse movement frustrate many people. If you use dropdowns, make sure the top-level item is also a real, clickable page, and that the menu works with the keyboard as well as the mouse. Keyboard navigation and focus order deserve specific testing, since menus are a common place for them to break.
Mobile menus
On a phone, menus usually collapse behind an icon. This is fine, but check the details. Tap targets should be large enough to press without hitting a neighbor, and the open menu should be easy to close. Hiding everything behind one icon can make important pages less discoverable, so consider whether one or two key actions deserve to stay visible. Testing on a real device, not only in a resized browser window, often reveals problems that otherwise go unnoticed.
What breadcrumbs are
A breadcrumb trail is a short line near the top of a page showing the path from the home page to the current one, for example: Home > Bread > Sourdough Loaf. Each earlier step is a link. Visitors can jump up a level with one click, which is especially useful when they arrive from a search and have not seen the rest of the site.
There are a few styles. A location trail reflects the site hierarchy and is the most common. A path trail shows the pages the visitor actually clicked through, and an attribute trail lists features such as filters. For most sites, the location style is the clearest because it stays the same regardless of how someone arrived.
When breadcrumbs are worth adding
Breadcrumbs help most on sites with several levels: stores with categories and subcategories, large guides, documentation and directories. A five-page brochure site usually does not need them, since the main menu already shows everything. Adding a trail to a flat site can be clutter.
If you do add them, follow a few habits:
- Reflect the real hierarchy, and keep it consistent with your URLs where practical.
- Make every step except the last a link, and leave the current page as plain text.
- Use short names that match the page headings or menu labels.
- Place the trail near the top, above the main heading, in a modest size.
- Do not use it to replace the main menu.
A product that belongs in two categories raises a small design question. Pick one primary path for the trail and stick to it, so each page has a single predictable location. This also helps avoid duplicate pages for the same item, a problem that often shows up with product variants.
Breadcrumbs and search results
Search engines sometimes display a page’s location trail in place of a plain address in results. That depends on whether the page is eligible and on choices the search engine makes, so it cannot be promised. The markup that describes a trail falls under structured data; it is worth adding only if the visible trail on the page is accurate and matches it. Treat any search appearance as a bonus, not the goal.
Checking your own navigation
You can test navigation without special tools:
- Ask someone unfamiliar with the site to find three things and watch where they hesitate.
- Open a deep page directly and see whether you can tell where it sits and how to reach its parent.
- Look for menu items that nobody uses or labels that mean different things to different people.
- Check that all menu and trail links work and do not lead to redirects or error pages. Broken links in a menu appear on every page at once, so they matter more than a broken link in one article.
- Confirm the menus work by keyboard and on a small screen.
Navigation is never really finished. As you add content, revisit the menu and ask whether each item still earns its place.