Right, let’s talk about menus. Not the laminated kind you get at a diner, but the ones that hold your entire website together. You’ve got your main nav, your footer, and that sneaky sidebar. They’re not just different places to put links; they serve fundamentally different purposes for your users. Getting this wrong is like putting the silverware drawer in the bathroom—sure, it’s in the house, but good luck finding it when you need it.

The main navigation is your prime real estate. This is for the big-ticket items: Home, About, Products, Contact. The stuff a first-time visitor needs to not get immediately lost. The rule of thumb here is brutal simplicity. If you have more than seven items, we need to have a talk. Humans can only hold about that many things in their working memory, and your user is probably distracted by a cat video in another tab. Use a logical, hierarchical structure, and for the love of all that is good, label things clearly. “Solutions” is a cop-out. What are you solving? Call it “Web Design Services” or “Taxidermy Kits.” Be specific.

Here’s a classic, no-frills HTML structure for a main nav. We use a <nav> element because semantics matter for accessibility and SEO, and an unordered list because, well, it’s a list of items.

<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Styling the Beast with CSS

The raw HTML is just the skeleton. CSS gives it its clothes. You’ll almost certainly want to style those list items to sit in a row. This is where we ditch the bullet points and make it look like a proper menu.

nav ul {
    list-style: none; /* Goodbye, ugly bullets */
    margin: 0;
    padding: 0;
    display: flex; /* The magic property that makes it all line up */
    gap: 2rem; /* A modern way to space things out. */
    background-color: #f8f8f8;
    padding: 1rem;
}

nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

nav a:hover {
    color: #007acc; /* A simple hover state. Don't skip this. */
}

The footer menu is for the stuff you might need, but you don’t want cluttering the main view. This is where links go to retire: Terms of Service, Privacy Policy, site map, maybe some legacy product links. It’s also your last chance to give a user a direction, so sometimes you’ll see “repeat” links like Contact down here too. The HTML structure is nearly identical, just wrapped in a footer element and often styled more simply.

<footer>
    <nav aria-label="Footer navigation">
        <ul>
            <li><a href="/privacy">Privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
            <li><a href="/sitemap">Site Map</a></li>
        </ul>
    </nav>
    <p>© 2023 My Awesome Site</p>
</footer>

The Sidebar: Contextual Chaos

Ah, the sidebar. This is where designers often lose their minds. Its purpose is contextual navigation. It shouldn’t be a dumping ground for every link you couldn’t fit elsewhere. On a blog post, it’s for related articles, categories, or the author bio. On a product page, it might be for related products or filters. If your sidebar is the same on every page, you’re probably doing it wrong—you’ve just created a second, less important main menu and confused everyone.

The code is similar, but its placement and content are dynamic.

<aside> <!-- Use <aside> for tangential, related content -->
    <h3>Related Posts</h3>
    <nav aria-label="Related posts">
        <ul>
            <li><a href="/blog/post-1">Post 1</a></li>
            <li><a href="/blog/post-2">Post 2</a></li>
            <li><a href="/blog/post-3">Post 3</a></li>
        </ul>
    </nav>
</aside>

The Single Most Important Thing: Accessibility

I don’t care how pretty your menu is if 26% of adults can’t use it. That aria-label="Main navigation" I snuck in? That’s not a suggestion. It’s a requirement for screen readers to distinguish between your multiple nav elements. Also, for the love of all users, make sure you manage focus states and you can navigate your entire menu with a keyboard. Tab through your site right now. If you get lost in a CSS display: none black hole, your users will too. Use semantic HTML as your base—it does most of the heavy lifting for you before you write a single line of CSS.

The pitfall? Thinking these are just three identical menus in different locations. They’re not. They serve different user intents. The main nav is for orientation, the footer is for completion, and the sidebar is for deeper exploration. Design and code them with that in mind, and you’ll have a site that doesn’t just look good, but actually works.