<aside> & <nav> — Complementary and Navigation

Basic Syntax

<!-- Navigation -->
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>

<!-- Aside (sidebar) -->
<aside>
    <h2>Related Posts</h2>
    <ul>
        <li><a href="/post-1">Post 1</a></li>
        <li><a href="/post-2">Post 2</a></li>
    </ul>
</aside>

nav — What Belongs Inside

Wrap navigation links in a <nav> and typically inside a <ul>.

<!-- Primary site navigation -->
<nav aria-label="Main">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/courses/html">HTML</a></li>
    </ol>
</nav>

<!-- Table of contents -->
<nav aria-label="Table of contents">
    <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#setup">Setup</a></li>
        <li><a href="#usage">Usage</a></li>
    </ul>
</nav>

What Does NOT Belong in nav

Do NOT wrap in <nav>:

• Social media icons in the footer
• Related posts at the bottom of an article
• Inline links inside a paragraph
• Tag lists or category lists
• Footer legal links (Privacy, Terms)

These are lists or groups of links, not navigation. Use <ul> or a <div> with a heading instead.

aside — Tangential Content

Use <aside> for content that is related to the main topic but not essential to it.

<!-- Sidebar with related links -->
<aside>
    <h2>Related Posts</h2>
    <ul>
        <li><a href="/html-semantic">Understanding Semantic HTML</a></li>
        <li><a href="/css-grid">CSS Grid Basics</a></li>
    </ul>
</aside>

<!-- Pull quote inside an article -->
<article>
    <p>The main article content...</p>
    <aside>
        <p>"Semantic HTML is not optional — it is the foundation of accessible web design."</p>
    </aside>
    <p>More content...</p>
</article>

<!-- Advertisement -->
<aside aria-label="Advertisement">
    <div class="ad-slot">...</div>
</aside>

<!-- Author bio at the end of a blog post -->
<article>
    <p>...article content...</p>
    <aside class="author-bio">
        <h3>About the Author</h3>
        <p>Jane Doe is a developer...</p>
    </aside>
</article>

Multiple navs on One Page

A page can have multiple <nav> elements. Label each one with aria-label so screen readers can distinguish them.

<body>
    <!-- 1. Primary site navigation -->
    <nav aria-label="Main">...</nav>

    <!-- 2. Breadcrumb -->
    <nav aria-label="Breadcrumb">...</nav>

    <main>
        <!-- 3. Table of contents in the sidebar -->
        <aside>
            <nav aria-label="Table of contents">...</nav>
        </aside>
    </main>

    <!-- 4. Footer navigation -->
    <footer>
        <nav aria-label="Footer">...</nav>
    </footer>
</body>

Accessible Navigation Menu

A complete accessible navigation pattern — the toggle uses ARIA attributes.

<nav aria-label="Main">
    <button
        aria-expanded="false"
        aria-controls="main-menu"
        class="menu-toggle">
        ☰ Menu
    </button>

    <ul id="main-menu">
        <li><a href="/">Home</a></li>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<script>
    const toggle = document.querySelector(".menu-toggle");
    const menu = document.getElementById("main-menu");

    toggle.addEventListener("click", () => {
        const expanded = toggle.getAttribute("aria-expanded") === "true";
        toggle.setAttribute("aria-expanded", !expanded);
        menu.hidden = expanded;
    });
</script>