Skip to main content

Search

Header

Overview

This header supports multi-level navigation menus for desktop and mobile.

Preview

ipsum banner copy goes here

Code

<header class="dd-header">
  <div class="dd-alert -compact">
    <div class="dd-g">
      <div class="dd-u-1-1">
        <div class="dd-alert__copy l-box">ipsum banner copy goes here</div>
      </div>
    </div>
  </div>
  <div class="dd-header__top">
    <div class="dd-g -y-center">
      <div class="dd-header__logo dd-u-18-24 dd-u-sm-18-24 dd-u-md-18-24 dd-u-lg-2-24">
        <a href="#" hx-get="/pages/home.html" hx-target="main" hx-swap="innterHTML">
          <picture>
            <source srcset="/assets/imgs/logo-full-white-text.svg" media="(prefers-color-scheme: dark)">
            <img src="/assets/imgs/logo-full-black-text.svg" alt="logo" class="dd-img">
          </picture>
        </a>
      </div>
      <div class="dd-header__navigation navigation -main-menu dd-u-1-1 dd-u-sm-1-1 dd-u-md-1-1 dd-u-lg-18-24 -y-center">
        <nav itemscope itemtype="https://schema.org/SiteNavigationElement" aria-label="header navigation">
          <button class="dd-menu__close"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg><span class="visually-hidden">Menu</span></button>
          <ul class="menu">
            <li class="menu-item menu-item-has-children">
              <a href="#">First Menu</a>
              <ul class="sub-menu">
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
              </ul>
            </li>
            <li class="menu-item menu-item-has-children">
              <a href="#">Second Menu</a>
              <ul class="sub-menu">
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
              </ul>
            </li>
            <li class="menu-item menu-item-has-children">
              <a href="#">Third Menu</a>
              <ul class="sub-menu">
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
              </ul>
            </li>
            <li class="menu-item menu-item-has-children">
              <a href="#">Fourth Menu</a>
              <ul class="sub-menu">
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="navigation__link">Link</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
      <div class="dd-header__search-icon dd-u-3-24 dd-u-sm-3-24 dd-u-md-3-24 dd-u-lg-4-24 -y-center -x-center">
        <button class="dd-search__toggle"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg><span class="visually-hidden">Search</span></button>
      </div>
      <div class="dd-header__menu-icon dd-u-3-24 dd-u-sm-3-24 dd-u-md-3-24 -y-center -x-center">
        <button class="dd-menu__toggle"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M0 0h24v24H0z" fill="none"></path><path fill="currentColor" d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path></svg><span class="visually-hidden">Menu</span></button>
      </div>
    </div>
  </div>
  <div class="dd-search">
    <button class="dd-search__close">- search</button>
    <form action="">
      <label for="name">Search<br />
        <input type="text" id="name">
      </label>
    </form>
  </div>
</header>

Framework files

  • source/js/components/_dd_navigation.js
  • source/js/components/_dd_search.js
  • source/scss/components/_dd_header.scss (styles)
  • source/scss/components/_dd_navigation.scss (styles)
  • source/scss/components/_dd_search.scss (styles)