Footer 001

Overview

This footer variant supports multi-level navigation menus, a newsletter signup form, company info (address, phone, and email), social media links, and a copyright section.

Preview

Code

<footer class="dd-footer dd-footer-001">
  <div class="dd-footer__intro-contact dd-g l-box">
    <div class="dd-footer__intro-menu dd-u-1-1 dd-u-lg-16-24 l-box">
      <div class="dd-footer__intro-menu-content dd-g">
        <div class="dd-footer__intro-menu-title h1 dd-u-1-1">Some Interesting links for you to check out</div>
        <div class="dd-footer__intro-menu-menu dd-u-1-1">
          <div class="dd-g">
            <div class="dd-footer__navigation navigation -footer-menu dd-u-1-1 dd-u-lg-8-24">
              <nav class="navigation -footer" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement" aria-label="Footer navigation first">
                <ul class="menu">
                  <li class="menu-item"><a href="#" class="navigation__link -no-link">First Menu</a>
                    <ul class="sub-menu">
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                    </ul>
                  </li>
                </ul>
              </nav>
            </div>
            <div class="dd-footer__navigation navigation -footer-menu dd-u-1-1 dd-u-lg-8-24">
              <nav class="navigation -footer" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement" aria-label="Footer navigation second">
                <ul class="menu">
                  <li class="menu-item"><a href="#" class="navigation__link -no-link">Second Menu</a>
                    <ul class="sub-menu">
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                    </ul>
                  </li>
                </ul>
              </nav>
            </div>
            <div class="dd-footer__navigation navigation -footer-menu dd-u-1-1 dd-u-lg-8-24">
              <nav class="navigation -footer" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement" aria-label="Footer navigation third">
                <ul class="menu">
                  <li class="menu-item"><a href="#" class="navigation__link -no-link">Third Menu</a>
                    <ul class="sub-menu">
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                      <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                    </ul>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dd-footer__contact-us dd-u-1-1 dd-u-lg-8-24">
      <div class="dd-footer__contact-us-content dd-g">
        <div class="dd-footer__contact-us-title-menu dd-u-1-1 l-box">
          <div class="dd-footer__contact-us-title h1 dd-u-1-1">Contact Us</div>
          <div class="dd-footer__navigation navigation -footer-menu dd-u-1-1">
            <nav class="navigation -footer" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement" aria-label="Footer navigation fourth">
              <ul class="menu">
                <li class="menu-item"><a href="#" class="navigation__link -no-link">Forth Menu</a>
                  <ul class="sub-menu">
                    <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                    <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                    <li class="menu-item"><a href="#" class="navigation__link">Menu Item</a></li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <div class="dd-footer__navigation navigation -social-menu dd-u-1-1">
          <nav class="navigation -social" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement" aria-label="Footer navigation social">
            <ul class="menu">
              <li class="menu-item">
                <a href="#" itemprop="url" class="-facebook"><span class="visually-hidden">Facebook</span></a>
              </li>
              <li class="menu-item">
                <a href="#" itemprop="url" class="-instagram"><span class="visually-hidden">Instagram</span></a>
              </li>
              <li class="menu-item">
                <a href="#" itemprop="url" class="-x"><span class="visually-hidden">Twitter</span></a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="dd-g">
    <div class="dd-footer__copyright dd-u-1-1 l-box">
      <span class="dd-footer__name">{{ Name Of Company }}</span> {{ copyright goes here }}
    </div>
  </div>
</footer>