04. nav Element

Introduction

The <nav> element represents a section of a page containing navigation links. It’s used for major navigation blocks like site menus, table of contents, and pagination. The nav element helps screen readers identify navigation areas and improves accessibility.

Basic Usage

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Common Use Cases

Main Navigation

<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/services">Services</a></li>
    </ul>
</nav>

Breadcrumbs

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/category">Category</a></li>
        <li>Current Page</li>
    </ol>
</nav>

Pagination

<nav aria-label="Pagination">
    <ul>
        <li><a href="/page1">1</a></li>
        <li><a href="/page2">2</a></li>
        <li><a href="/page3">3</a></li>
    </ul>
</nav>

Multiple Nav Elements

You can have multiple nav elements:

<header>
    <nav aria-label="Main navigation">...</nav>
</header>
<aside>
    <nav aria-label="Table of contents">...</nav>
</aside>

Accessibility

Use aria-label for clarity:

<nav aria-label="Main navigation">
    <!-- Navigation links -->
</nav>

Best Practices

Not for All Links

Only use nav for major navigation:

<!-- Good: Major navigation -->
<nav>
    <ul>
        <li><a href="/">Home</a></li>
    </ul>
</nav>

<!-- Avoid: Single link -->
<nav>
    <a href="/link">Link</a>
</nav>

References

• MDN Web Docs - nav element