Metro Component Library Demo 2.0

Headers 

<style scoped>
    .usa-header {
        margin-bottom: 14rem;
    }

    .usa-header~.usa-header {
        border-top: 1px dotted black;
    }
</style>

<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic">
    <div class="usa-nav-container">

        <div class="usa-navbar">
            <div class="usa-logo" id="basic-logo">
                <em class="usa-logo__text">
                    <a href="javascript:void(0)" title="Basic header">
                        Basic header
                    </a>
                </em>
            </div>
            <button class="usa-menu-btn">Menu</button>
        </div>
        <nav aria-label="Primary navigation" class="usa-nav">

            <button class="usa-nav__close">
                <img src="../../../dist/img/usa-icons/close.svg" role="img" alt="Close">
            </button>
            <ul class="usa-nav__primary usa-accordion">
                <li class="usa-nav__primary-item">

                    <button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="basic-nav-section-one">
                        <span>&lt;Current section&gt;</span>
                    </button>

                    <ul id="basic-nav-section-one" class="usa-nav__submenu">
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                    </ul>
                </li>
                <li class="usa-nav__primary-item">

                    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-nav-section-two">
                        <span>&lt;Section&gt;</span>
                    </button>

                    <ul id="basic-nav-section-two" class="usa-nav__submenu">
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                    </ul>
                </li>
                <li class="usa-nav__primary-item">

                    <a href="javascript:void(0)" class="usa-nav__link">

                        <span>&lt;Simple link&gt;</span>

                    </a>

                </li>
            </ul>

            <form class="usa-search usa-search--small" role="search">

                <label class="usa-sr-only" for="basic-search-field-en-small">
                    Search
                </label>
                <input class="usa-input" id="basic-search-field-en-small" type="search" name="search">
                <button class="usa-button" type="submit">

                    <span class="usa-sr-only">Search</span>
                </button>
            </form>

        </nav>
    </div>
</header>

<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic usa-header--megamenu">
    <div class="usa-nav-container">

        <div class="usa-navbar">
            <div class="usa-logo" id="basic-mega-logo">
                <em class="usa-logo__text">
                    <a href="javascript:void(0)" title="Basic with mega-menu">
                        Basic with mega-menu
                    </a>
                </em>
            </div>
            <button class="usa-menu-btn">Menu</button>
        </div>
        <nav aria-label="Primary navigation" class="usa-nav">

            <button class="usa-nav__close">
                <img src="../../../dist/img/usa-icons/close.svg" role="img" alt="Close">
            </button>
            <ul class="usa-nav__primary usa-accordion">
                <li class="usa-nav__primary-item">

                    <button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="basic-mega-nav-section-one">
                        <span>&lt;Current section&gt;</span>
                    </button>

                    <div id="basic-mega-nav-section-one" class="usa-nav__submenu usa-megamenu">
                        <div class="grid-row grid-gap-4">
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;A very long navigation link that goes onto two lines&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="usa-nav__primary-item">

                    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-mega-nav-section-two">
                        <span>&lt;Section&gt;</span>
                    </button>

                    <div id="basic-mega-nav-section-two" class="usa-nav__submenu usa-megamenu">
                        <div class="grid-row grid-gap-4">
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;A very long navigation link that goes onto two lines&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="usa-nav__primary-item">

                    <a href="javascript:void(0)" class="usa-nav__link">

                        <span>&lt;Simple link&gt;</span>

                    </a>

                </li>
            </ul>

            <form class="usa-search usa-search--small" role="search">

                <label class="usa-sr-only" for="basic-mega-search-field-en-small">
                    Search
                </label>
                <input class="usa-input" id="basic-mega-search-field-en-small" type="search" name="search">
                <button class="usa-button" type="submit">

                    <span class="usa-sr-only">Search</span>
                </button>
            </form>

        </nav>
    </div>
</header>

<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended">

    <div class="usa-navbar">
        <div class="usa-logo" id="extended-logo">
            <em class="usa-logo__text">
                <a href="javascript:void(0)" title="Extended header">
                    Extended header
                </a>
            </em>
        </div>
        <button class="usa-menu-btn">Menu</button>
    </div>
    <nav aria-label="Primary navigation" class="usa-nav">
        <div class="usa-nav__inner">

            <button class="usa-nav__close">
                <img src="../../../dist/img/usa-icons/close.svg" role="img" alt="Close">
            </button>
            <ul class="usa-nav__primary usa-accordion">
                <li class="usa-nav__primary-item">

                    <button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="extended-nav-section-one">
                        <span>&lt;Current section&gt;</span>
                    </button>

                    <ul id="extended-nav-section-one" class="usa-nav__submenu">
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                    </ul>
                </li>
                <li class="usa-nav__primary-item">

                    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two">
                        <span>&lt;Section&gt;</span>
                    </button>

                    <ul id="extended-nav-section-two" class="usa-nav__submenu">
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                        <li class="usa-nav__submenu-item">

                            <a href="#">

                                &lt;Navigation link&gt;

                            </a>

                        </li>
                    </ul>
                </li>
                <li class="usa-nav__primary-item">

                    <a href="javascript:void(0)" class="usa-nav__link">

                        <span>&lt;Simple link&gt;</span>

                    </a>

                </li>
            </ul>
            <div class="usa-nav__secondary">
                <ul class="usa-nav__secondary-links">
                    <li class="usa-nav__secondary-item">
                        <a href="">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-nav__secondary-item">
                        <a href="">&lt;Another secondary link&gt;</a>
                    </li>
                </ul>

                <form class="usa-search usa-search--small" role="search">

                    <label class="usa-sr-only" for="extended-search-field-en-small">
                        Search
                    </label>
                    <input class="usa-input" id="extended-search-field-en-small" type="search" name="search">
                    <button class="usa-button" type="submit">

                        <span class="usa-sr-only">Search</span>
                    </button>
                </form>

            </div>
        </div>
    </nav>
</header>

<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended">

    <div class="usa-navbar">
        <div class="usa-logo" id="extended-mega-logo">
            <em class="usa-logo__text">
                <a href="javascript:void(0)" title="Extended header&lt;br&gt;with mega-menu">
                    Extended header&lt;br&gt;with mega-menu
                </a>
            </em>
        </div>
        <button class="usa-menu-btn">Menu</button>
    </div>
    <nav aria-label="Primary navigation" class="usa-nav">
        <div class="usa-nav__inner">

            <button class="usa-nav__close">
                <img src="../../../dist/img/usa-icons/close.svg" role="img" alt="Close">
            </button>
            <ul class="usa-nav__primary usa-accordion">
                <li class="usa-nav__primary-item">

                    <button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="extended-mega-nav-section-one">
                        <span>&lt;Current section&gt;</span>
                    </button>

                    <div id="extended-mega-nav-section-one" class="usa-nav__submenu usa-megamenu">
                        <div class="grid-row grid-gap-4">
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;A very long navigation link that goes onto two lines&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="usa-nav__primary-item">

                    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-mega-nav-section-two">
                        <span>&lt;Section&gt;</span>
                    </button>

                    <div id="extended-mega-nav-section-two" class="usa-nav__submenu usa-megamenu">
                        <div class="grid-row grid-gap-4">
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;A very long navigation link that goes onto two lines&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                    <li class="usa-nav__submenu-item">

                                        <a href="#">

                                            &lt;Navigation link&gt;

                                        </a>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="usa-nav__primary-item">

                    <a href="javascript:void(0)" class="usa-nav__link">

                        <span>&lt;Simple link&gt;</span>

                    </a>

                </li>
            </ul>
            <div class="usa-nav__secondary">
                <ul class="usa-nav__secondary-links">
                    <li class="usa-nav__secondary-item">
                        <a href="">&lt;Secondary link&gt;</a>
                    </li>
                    <li class="usa-nav__secondary-item">
                        <a href="">&lt;Another secondary link&gt;</a>
                    </li>
                </ul>

                <form class="usa-search usa-search--small" role="search">

                    <label class="usa-sr-only" for="extended-mega-search-field-en-small">
                        Search
                    </label>
                    <input class="usa-input" id="extended-mega-search-field-en-small" type="search" name="search">
                    <button class="usa-button" type="submit">

                        <span class="usa-sr-only">Search</span>
                    </button>
                </form>

            </div>
        </div>
    </nav>
</header>

No notes defined.

package:
  name: metro-digital-design-system-demo
  version: 0.1.0
uswds:
  path: ../../../dist
placeholderLink: javascript:void()
nav:
  aria_label: Primary navigation