3 #Navbar Navbar

A responsive navigation bar for site navigation, collapsing into a hamburger menu on mobile devices. Supports branding, navigation items, and optional dropdowns. Accessible and semantic for all users.

Modifiers: .navbar--dark - Dark-themed navbar with inverted colors .navbar__link--dropdown - Indicates a dropdown trigger .navbar__toggle--open - Applied to toggle button when menu is expanded

Example

Markup

<nav class="navbar" role="navigation" aria-label="Main navigation">
    <div class="navbar__brand">
        <a href="/" class="navbar__brand-link">MyBrand</a>
    </div>
    <button class="navbar__toggle" aria-label="Toggle navigation" aria-expanded="false">
        <span class="navbar__toggle-icon"></span>
    </button>
    <ul class="navbar__nav">
        <li class="navbar__item"><a href="/" class="navbar__link">Home</a></li>
        <li class="navbar__item"><a href="/about" class="navbar__link">About</a></li>
        <li class="navbar__item">
            <a href="/products" class="navbar__link navbar__link--dropdown" aria-haspopup="true">Products</a>
            <ul class="navbar__dropdown">
                <li><a href="/products/electronics" class="navbar__dropdown-link">Electronics</a></li>
                <li><a href="/products/clothing" class="navbar__dropdown-link">Clothing</a></li>
            </ul>
        </li>
    </ul>
</nav>
<nav class="navbar navbar--dark" role="navigation" aria-label="Main navigation">
    <div class="navbar__brand">
        <a href="/" class="navbar__brand-link">MyBrand</a>
    </div>
    <button class="navbar__toggle" aria-label="Toggle navigation" aria-expanded="false">
        <span class="navbar__toggle-icon"></span>
    </button>
    <ul class="navbar__nav">
        <li class="navbar__item"><a href="/" class="navbar__link">Home</a></li>
        <li class="navbar__item"><a href="/about" class="navbar__link">About</a></li>
        <li class="navbar__item">
            <a href="/products" class="navbar__link navbar__link--dropdown" aria-haspopup="true">Products</a>
            <ul class="navbar__dropdown">
                <li><a href="/products/electronics" class="navbar__dropdown-link">Electronics</a></li>
                <li><a href="/products/clothing" class="navbar__dropdown-link">Clothing</a></li>
            </ul>
        </li>
    </ul>
</nav>

Source: css/components/navbar.scss, line 1