Navigation Components

Top Navigation Bar

<nav class="nav-bar" aria-label="Main navigation">
    <a href="/" class="nav-link">Home</a>
    <a href="/page" class="nav-link active">Active Page</a>
    <a href="/other" class="nav-link">Other</a>
</nav>

Breadcrumb Navigation

<nav class="breadcrumb" aria-label="Breadcrumb">
    <a href="/">Home</a> →
    <a href="/section">Section</a> →
    <span aria-current="page">Current Page</span>
</nav>

Side Navigation

<nav class="side-nav" aria-label="Section navigation">
    <h3 class="side-nav-title">Table of Contents</h3>
    <ul class="side-nav-list">
        <li><a href="#section" class="side-nav-link">Section</a></li>
    </ul>
</nav>

Mobile Hamburger Menu

☰

Menu

✕

<div class="mobile-nav">
    <button class="hamburger-button" onclick="toggleMobileMenu()">
        <span class="hamburger-icon">☰</span>
    </button>
    <div class="mobile-menu" id="mobileMenu">
        <nav class="mobile-menu-nav">
            <a href="/" class="mobile-nav-link">Home</a>
        </nav>
    </div>
</div>

Footer Navigation

<nav class="footer-nav" aria-label="Footer navigation">
    <div class="footer-nav-section">
        <h4>Section</h4>
        <ul>
            <li><a href="/link">Link</a></li>
        </ul>
    </div>
</nav>