Website Navigation Best Practices & Examples

February 7, 2025

Your #1 navigation goal – easy to use.

The #1 thing to keep in mind when planning navigation is ***drumroll please*** people will be using it.

Yup. People. As in humans. And humans are all different. When it comes to website navigation, there are two types of people you’re designing for:

Information Skimming Humans

First, you’ve got the skimmers – the big picture folks or people pressed for time. Let’s face it, they’re not going to read every detail on your site.  They’re not deep divers. They use the navigation to get the lay of the land and find the key info they need to make the decision they’re after. Once they get the big picture information they need they’ll contact you.

Deep Diving Humans

Then, there’s the second group – the detail-oriented folks. Think engineers, accountants, and others who really like to dig in. These people want to know everything about your service or product before they pick up the phone or shoot you an email. They’re doing their homework, making sure they have all the facts, and they expect your website to give them the full picture.

The navigation throughout your site needs to serve both human types.

A successful navigation guides both skimmers and divers because both types of humans are making buying decisions before they even contact you. Give the skimmers an easy-to-digest overview, and also let the detail-seekers dive into the specifics. 

I know we’re in an age where people don’t want to read. Which would lead you to believe that your website doesn’t need words, but trust me – you still need them! Both for humans and for Google. The key is formatting those words in a way that’s easy to skim for some and easy to read for others.

When planning your navigation to cater to both types of humans there are multiple types of navigation to evaluate and consider. 

Types of Website Navigation

When it comes to website navigation, there are a few key types you need to keep in mind to ensure your users have a smooth experience. Let’s break them down!

1. Main Navigation 

This one’s probably what most people think of first – it’s the navigation at the top of your website, usually with your most important links that acts as a table of contents for your site. And yes, drop-down menus fall under this category too. 

2. Internal Navigation 

Internal navigation is what helps guide users through your site once they’re already there. Think of it like the path you create for them to follow. If you know people will need more info after reading a specific page, internal navigation works to keep them moving forward.

Examples of internal navigation include breadcrumbs (which we’ll define later), call-outs, landing pages, and features like search and filters. These navigational elements help people get from point A to point B within your site without feeling lost. It’s like guiding them from one slide to the next in a PowerPoint presentation.

3. Footer Navigation 

Lastly, we’ve got footer navigation – yep, it’s at the bottom of the page. Many people overlook this, but a good footer can be a navigational savior, especially on mobile. A good footer offers quick access to other areas of the site without having to scroll all the way back up.

Lets kick off our best practices breakdown with main website navigation—the unsung hero of user experience. 

Best Practices for Main Navigation

Don’t Make It Feel Like Using Someone Else’s Microwave

While humans are undebatably different, we do have one thing in common – we don’t really like to think. Making people think too hard about HOW to use your navigation pretty much makes them feel dumb and thus annoyed…with you. Yes you, the owner of the site.  So, if using your main navigation feels like deciphering someone else’s microwave (seriously, why aren’t those standardized?), you’re doing it wrong.

Keep It Obvious: No Mystery Meat

Creativity is awesome. We love a beautifully branded website. But if people need to puzzle over your navigation like it’s a riddle, that creativity is working against you. Pave names like “Work” might seem logical to you, but are you talking to potential employees or clients? Be clear! 

Careers = jobs you’re hiring for.
Portfolio = examples of your work.
Services = the work you provide. 

No one wants to play detective just to figure out where to click.

Keep It Simple: Fewer Choices, Please

When it comes to links, less is more. Aim for 5-7 items in your main navigation, max. Think of them as buckets: Services, About, Contact. Don’t try to cram your entire site up there—save the details for submenus or internal navigation elements.

Space It Out: No Sentences Allowed

Your navigation links shouldn’t look like one long sentence. Give each item enough space to breathe—think at least three-quarters of an inch apart. At a glance you should be able to recognize each item as a separate option. Tight spacing makes your menu feel like a run-on sentence…no fun to read and requires too much effort to understand quickly.

Contact and Home: To Include or Not to Include

Should you include home on your main navigation?

Some folks argue against including a Home link, especially for younger audiences who instinctively click the logo. But on mobile? It’s non-negotiable. Add a home link to the top of your slide out navigation as a courtesy to visitors. So when the menu is expanded they can go back to Home quickly.

Should you include contact on your main navigation?

And as for Contact, unless you actively don’t want people to reach out (looking at you, anonymous recipe bloggers), make it easy to find. If you’re a service based business without a Contact link (and maybe even a phone number) on the main navigation you’ve failed. 

There are some exceptions. If you’re running out of space and the most important thing for people to do on your site is Events, Shop or Donate then you can nest the contact link. Because your main order of business is not for them to contact you but take another action online.

Highlight the Important Stuff

Want people to contact you, donate, or get a quote? Make that link pop. Add a splash of color, bold it, put a box around it—whatever it takes to say, “Hey! Click me!” You’re not being pushy; you’re being helpful.

ADA Compliance: Don’t Marie Kondo Your Menu

Clean and simple is great, but don’t Marie Kondo your navigation to the point of hiding it in a hamburger menu on desktop. You need to keep the items that “spark joy” – ya? And the main pages of your site do just that for your visitors. Your navigation should be visible, accessible, and easy to use for everyone, including people with disabilities. That means clear active states, enough contrast for colorblind users, and text that’s big enough for all eyes to read.

P.S. Hamburger menus on the desktop aren’t ADA compliant – that’s what we’re saying. And non-ada compliant is non-considerate. Which is lame.

Drop-Downs: Love Them or Leave Them

Drop-down menus can be helpful—especially on mobile—but don’t overdo it. Keep them consistent, simple, and free of unnecessary fluff like pictures or lengthy descriptions – save those things for landing pages. And for the love of all things holy, avoid tertiary menus (a.k.a. drop-downs within drop-downs). Those are the equivalent of using a fork for soup: frustrating, unnecessary, and messy.

Bonus Pro Tip: Embrace Big Footers

If you’ve got tons of content, skip the mega drop-downs and go for a robust footer instead. Treat it like a site map—yes, some humans actually scroll down there to find stuff. Pair that with a solid search feature, and you’re golden.

Main navigation TLDR: 

Don’t make people feel stupid about their forks.

If your main navigation feels too fancy. It’s like figuring out which fork to use and no one likes to feel dumb and annoyed. Keep it simple and straightforward and lean into internal and footer navigation to organize your content so people can easily find what they want inside of your site.

Making Internal Navigation Work

Callouts, Breadcrumbs, and the Secrets of Website Bliss

We’ve already established that nobody enjoys getting lost on a website. A solid internal navigation system is like a GPS, helping visitors find what they need without rage-quitting your site. 

1. Callouts: Your Website’s Next Button

Oh, callouts. How do we love thee? Let us count the ways! Callouts are like little signposts that say, “Hey, you might also want to check this out!” All websites, big and small, need call outs. They guide users to their next step, whether it’s booking a service, donating to a nonprofit, or snagging a free download.

Here’s the magic formula:

• Think of callouts as boxes guiding people to the next step in your power point presentation (even if they don’t look like boxes).
• Place them where they make sense—right within the content, not buried in the footer.
• Keep them consistent. If your callout says “Donate Now” on one page, it can look the same on the next. People like familiar buttons they don’t have to overthink.

FUN FACT: Consistency isn’t boring—it’s strategic! 

The first time someone sees a “Donate Now” callout, they might skip it. By the third time, when they’re ready to act, it’s like a little nudge that subconsciously tells them, “Hey, still here if you’re interested.”

2. Breadcrumbs: The Unsung Heroes of Navigation

Breadcrumbs might seem a bit old-school, but they’re secretly awesome. These little links (usually located at the top of the page just below the header) show users where they are in big websites and let them backtrack with ease.

When are breadcrumbs the MVP?

• Shopping sites: Navigating from “Women’s Activewear > Tops > Tank Tops” is a breeze with breadcrumbs.
• Resource libraries: Got 10,000 blog posts? Breadcrumbs make it easy to jump categories without aimlessly clicking around.

Back in the late 1900s (yes, we’re calling it that), websites relied on clunky submenus for this. Thankfully, today’s breadcrumbs keep things smooth and modern, no extra dropdowns required.

3. Landing Pages: The Table of Contents of Internal Navigation

Landing pages are like your website’s multitaskers. They’re where people go to get a bird’s-eye view of a topic—whether it’s your services, product categories, or ad campaign promises.

Two types of landing pages to consider:

1. Informational Landing Pages 

These are your “Table of Contents” pages. For example, a services landing page might share your big picture competitive advantages then list everything you offer with links to more details. 

2. Sales-Focused Landing Pages 

These hyper-focused pages are perfect for ad campaigns or lead magnets. They’re built to convert, guiding visitors to fill out a form, make a purchase, or download a freebie.

PRO TIP: Avoid the dreaded “bulleted list of sadness.” 

A landing page should be engaging, informative, and designed to make people want to stick around—not bounce immediately after reading five bullet points.

4. Search and Filter: The Shortcut to Sanity

If your website has tons of content (think e-commerce or resource-heavy blogs), a search feature or filtering system can save the day.

When to use search:

• Your navigation gets messy or overwhelming.
• Your page titles don’t cover every topic on the page.

When to use filters:

• Shopping sites where users need to drill down by size, brand, or category.
• Large content hubs where users want to pick and choose exactly what they see.

Making your website search actually useful (and not totally useless).

Let’s be real: a search bar on your website can be a lifesaver—or a total disaster. If you’re going to skip the mega menu and rely on a search feature instead, here’s the lowdown on making it work without driving your visitors (and yourself) nuts.

And as a final tip? Please, for the love of your visitors, make sure your search results don’t suck. Enough said.

5. The Importance of Strategic Placement

Not every page needs callouts, breadcrumbs, or filters, but when you use them, make sure they’re in the right spots. Overloading your homepage with callouts to every service? Nope. Showing your entire career opportunities list with all the details about each on one page? Yikes.

Be selective and thoughtful. Call out what matters most to your audience by anticipating what they want, guide them with breadcrumbs where they might get lost, and let search and filters handle the heavy lifting for big sites.

Internal Navigation TLDR: It’s glue.

Internal navigation might not be as flashy as your homepage design, but it’s the glue that holds your website together. Get it right, and your users will thank you—with clicks, conversions, and maybe even a little love.

Functional Footer Navigation 

Footer navigation doesn’t always get the spotlight like top nav or fancy landing pages, footer nav is an essential part of your website’s user experience. And guess what? It doesn’t have to be a carbon copy of your main navigation. In fact, it probably shouldn’t be!

Footer Navigation: A Place for the Extras

Here’s the thing about footer navigation—it’s the catch-all for the pages that don’t quite make the cut for your top menu. 

Picture this: You’re trying to buy an Uber Eats gift card but can’t find the link in the top menu. What do you do? You instinctively scroll to the bottom of the page. And guess what you find right there in the footer? A link to buy gift cards! Since It’s not their bread-and-butter offering, it wasn’t listed at the top of the page but Uber Eats made sure it had a home you could easily find.

That’s what footer nav is all about—housing the useful but not front-and-center stuff.

Unlike main navigation you can go wild (well, semi-wild) with the number of links in your footer. Think of it as the place where you can be a little more exhaustive, as long as it’s organized. Nobody wants a junk drawer of links.

Organized Footers = Happy Visitors

A well-organized footer mirrors your site’s structure without duplicating it exactly. If your top navigation uses dropdowns, consider grouping footer links in a similar way to keep things intuitive. This helps people find what they’re looking for without scratching their heads.

Make Your Footer Work Harder

If you’ve got a big website, adding a search bar to your footer is a pro move. Imagine someone scrolling all the way to the bottom of your site, not finding what they need, and being able to search right there—without the hassle of scrolling back up. It’s like handing them a map when they thought they were lost.

ADA Compliance: The Footer Rules

Just because your footer hangs out at the bottom of the page doesn’t mean it’s exempt from accessibility standards. It still needs to play by the ADA rules:

• Readable Links: Use fonts and sizes that people can actually see (this is not the time for “cute” 8-point text).
• Contrast Matters: Make sure your link colors stand out against the background.
• Obvious Links: Make sure links are underlined or stand out from other text in the footer, links need to look like links.
• Screen Reader Friendly: Your footer should be easily navigable for everyone, including people who rely on assistive technologies.

Footer Navigation TLDR: Organized, Accessible, Essential

Footer navigation might not be flashy, but it’s one of the most practical parts of your website. Done right, it’s a safety net that catches visitors who couldn’t find what they needed up top. So, embrace the footer! Keep it organized, accessible, and user-friendly—and maybe even toss in a search bar for good measure.

Got questions about footers or site navigation? Drop me a line—I could talk website structure all day!

Easy ways to use data to tell if your website navigation stinks.

We’ve covered the main types of navigation—top nav, internal nav, and footer nav—and given you plenty of tips for each. But how do you know if your navigation is actually working? Spoiler: just because it looks great doesn’t mean it’s doing its job. Don’t worry; we’ve got some easy, fun, and mildly techy ways to figure it out.

1. Google Knows All (and Tells All)

2. Google Analytics: Your Love-Hate Relationship

Yes, Google Analytics can feel like deciphering alien hieroglyphs. But it’s worth it. Here’s what to check:

Here’s an example: On a daycare website, there was a page titled Our Facility. Naturally, visitors clicked expecting to see photos of the daycare and learn about how it operated. Instead, they found staff photos and bios. Confused, they quickly left the page.

The solution? Rename the page to Staff. After the change, traffic to the page dropped (which was fine—it wasn’t what most people were looking for), but those who did visit stayed longer and engaged more.

The takeaway? 

Page names should clearly reflect the content. Misleading titles can frustrate visitors and hurt engagement.

Review page views for secondary and tertiary pages.

(Go to: Reports > Engagement > Pages & Screens then look for the Views column)

Take a look at the traffic to your secondary and tertiary-level pages. Are the most visited pages buried at the bottom of your drop-down menus or landing pages? If so, it’s time to rethink their placement.

Move the most frequently visited pages toward the top of the menu or landing page to make them easier to find. This small adjustment can greatly improve user experience and help visitors quickly access the content they’re looking for.

PROTIP: If you want to review the pages in a section in a group you can use the search feature to search for a shared component of the page URL. For example if your url structure is domain.com/about/about-sub-page you can type ‘about’ into the search feature to view on the pages in the about section.

Look at your landing pages.

(Go to: Reports > Engagement > Landing Page)

The landing pages with the highest number of Active users should probably be the same pages you have listed in your main navigation. If they’re not, ask yourself, should they be? In most cases I’d say yes. But there are a few exceptions.

Sometimes highly visited pages aren’t a good fit for your main navigation. For example, if your site features frequent blog posts, podcasts, or events, those pages might rack up traffic, but that doesn’t mean they need a permanent spot in your main menu.

Instead, highlight them strategically throughout your site. Use internal navigation to guide visitors to that content. For instance, a Upcoming Events section on your homepage is a perfect way to showcase events without cluttering your main navigation.

Don’t make people work for it.

When in doubt, remember this golden rule: Give people what they need quickly and easily. Don’t make them work for it, or worse—give up and leave. Follow these steps, and you’ll turn frustrated users into lifelong customers.

Happy navigating! 🚀