Drawer Navigation

Design System Navigation

Drawer Navigation Complete

Toggle drawer
  • 
    
    <div class="c-drawer l-grid l-grid--7-col">
      <div class="c-drawer__toggle js-toggle-parent u-theme--background-color-trans--darker">
        <div class="u-icon o-icon__close">
          <span></span>
          <span></span>
        </div>
      </div>
      <!-- .c-drawer__toggle -->
      <div class="l-grid-wrap--6-of-7 l-grid-item--s--6-col c-drawer__container u-spacing u-theme--background-color--darker">
        <div class="c-drawer__search">
            <form action="/search" role="search" method="get" class="search-form toggled-element">
        <fieldset>
          <legend class="is-vishidden">Search</legend>
          <input type="search" name="search" placeholder="Search …" class="search-form__input u-font--secondary--s" required />
          <button class="search-form__submit is-vishidden">
            <span class="is-vishidden">Submit</span>
          </button> <!-- /.search-form__submit -->
        </fieldset>
      </form> <!-- /.search-form -->
        </div>
        <!-- .c-drawer__search -->
        <div class="c-drawer__nav">
          <div class="c-drawer__nav-primary">
              <nav class="c-primary-nav c-priority-nav" role="navigation">
        <ul class="c-primary-nav__list c-priority-nav__list">
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Leadership Certification
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Assistant to the President for Evangelism</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Global Mission</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Mission Spotlight</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Church Mission Offerings</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Service
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Life Hope Centers</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Global Mission</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Mission Spotlight</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Church Mission Offerings</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base this-is-active">
                Beliefs
              </a>
                                </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                World Church
              </a>
                                </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Information
              </a>
                                </li>
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                News
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 1</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 2</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 3</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 4</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
              </ul>
        <!-- /.c-primary-nav__list -->
      </nav>
      <!-- /.c-primary-nav -->
            <ul class="c-drawer__subnav u-theme--background-color--darker"></ul>
          </div>
          <div class="c-drawer__nav-secondary">
              <nav class="c-secondary-nav" role="navigation">
        <ul class="c-secondary-nav__list">
                  <li class="c-secondary-nav__list-item has-subnav">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__language</title><path d="M10,4V2H6V0H4V2H0V4H5.9A9.16,9.16,0,0,1,4.51,5.56a8.84,8.84,0,0,1-1-1.08L1.9,5.74a12,12,0,0,0,1,1A26.55,26.55,0,0,1,.55,8.11l.9,1.78a22.2,22.2,0,0,0,3-1.8,23.58,23.58,0,0,0,3.06,1.8l.9-1.78A22.43,22.43,0,0,1,6.11,6.78,10.49,10.49,0,0,0,8.22,4Z" fill="#777"/></svg>
    </span>            Languages
              </a>
                          <span class="c-subnav__arrow o-arrow--down"></span>
                <ul class="c-secondary-nav__subnav c-subnav">
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">English</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">Spanish</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">French</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">Dutch</a>
                    </li>
                              </ul>
                <!-- /.c-subnav -->
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__subscribe</title><path d="M9,7V5A4,4,0,0,0,6,1.14V0H4V1.14A4,4,0,0,0,1,5V7A1,1,0,0,1,0,8v2H10V8A1,1,0,0,1,9,7ZM3,7V5A2,2,0,0,1,7,5V7a3,3,0,0,0,.18,1H2.82A3,3,0,0,0,3,7Z" fill="#9b9b9b"/></svg>
    </span>            Sitemap
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__find</title><path d="M0,4,2,8l4,2L10,0ZM5,7.24,3.49,6.51,2.76,5.05,6.41,3.59Z" fill="#777"/></svg>
    </span>            Find a Church
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__contact</title><path d="M0,0V8H6l4,2V0ZM8,6.76,6.47,6H2V2H8Z" fill="#777"/></svg>
    </span>            Contact
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__heart</title><path d="M9,1.27A3.4,3.4,0,0,0,5,.73a3.4,3.4,0,0,0-4,.54A3.34,3.34,0,0,0,1,6l4,4L9,6A3.34,3.34,0,0,0,9,1.27ZM7.6,4.57,5,7.17,2.4,4.57a1.34,1.34,0,0,1,0-1.89,1.36,1.36,0,0,1,1.89,0L5,3.39l.71-.71a1.37,1.37,0,0,1,1.89,0A1.34,1.34,0,0,1,7.6,4.57Z" fill="#777"/></svg>
    </span>            Press
              </a>
                      </li>
                <li class="c-secondary-nav__list-item c-secondary-nav__list-item__search c-secondary-nav__list-item__toggle js-toggle-menu js-toggle-search is-priority">
            <a href="#" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__search</title><path d="M9.91,8.5,7.43,6A4,4,0,1,0,4,8a4,4,0,0,0,2-.57L8.5,9.91ZM2,4A2,2,0,1,1,4,6,2,2,0,0,1,2,4Z" fill="#777"/></svg>
    </span>Search
            </a>
          </li>
          <li class="c-secondary-nav__list-item c-secondary-nav__list-item__menu c-secondary-nav__list-item__toggle js-toggle-menu is-priority">
            <a href="#" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__menu</title><path d="M0,0H10V2H0ZM0,10H10V8H0ZM0,6H10V4H0Z" fill="#9b9b9b"/></svg>
    </span>Menu
            </a>
          </li>
        </ul>
        <!-- /.c-secondary-nav__list -->
      </nav>
      <!-- /.c-secondary-nav -->
          </div>
        </div>
        <!-- .c-drawer__nav -->
        <div class="c-drawer__logo">
          <span class="u-icon u-icon--l u-path-fill--white">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 253.71 227.63"><title>icon-logo</title><path d="M67.68,120.38c-.1-9.91,2.8-18.41,20.8-36.41l39-39c10.4-10.4,19.1-19.29,19.1-29V.67c0-.89-1.1-.89-1.2,0-2.6,12.4-7.5,17.3-17.8,27.61L82.28,73.47c-17.1,17-19.5,35.1-15.8,46.91C66.78,121.38,67.68,121.47,67.68,120.38Zm64.2,38.9c0,.89,1,.89,1.2,0,2.6-12.5,7.6-17.4,17.8-27.61L166,116.78c19.8-19.9,10.7-39-.9-44.31-1-.5-1.4.31-.6,1,9.3,8,6.5,21.5-5.2,33.2L151,115c-10.4,10.31-19.1,19.2-19.1,29Zm81.8,26.6L168,178.17l-17.1,17.11c-10.4,10.39-19,19.3-19,29V227c0,.7.9.9,1.2.11,3.2-8.7,13.9-18.11,33.5-14.8,0,0,85.4,14.8,86.1,14.8a.9.9,0,0,0,1-.61.79.79,0,0,0-.2-.8c-.3-.39-39.8-39.8-39.8-39.8Zm-107.5,1h15a.66.66,0,0,0,.6-.6c0-7.9-6-13.31-30-9.2L40,186S.58,225.37.28,225.78a.79.79,0,0,0-.1,1.1.81.81,0,0,0,.8.2c.7-.11,86.1-14.8,86.1-14.8,19.6-3.31,30.3,6,33.5,14.8.3.8,1.2.7,1.2-.11v-29.5a.66.66,0,0,0-.6-.6l-15,.1a.64.64,0,0,1-.6-.6v-8.9a.65.65,0,0,1,.6-.6Zm26.8,25.9a36.3,36.3,0,0,1,6.9-15.81h-7.5a.65.65,0,0,0-.6.61v15.2c0,.89,1.1.89,1.2,0Zm13.6-158.6c0-.91-1.1-.91-1.2,0-2.6,12.39-7.5,17.29-17.8,27.6l-39.8,39.69c-19.8,19.81-10.7,39,.9,44.31,1,.5,1.4-.4.6-1-9.3-8-6.5-21.61,5.2-33.2l33-33c10.4-10.4,19.1-19.3,19.1-29Zm-19.1,17.49c10.4-10.3,19-19.2,19.1-29V27.27c0-.9-1.1-.9-1.2,0-2.6,12.4-7.5,17.4-17.8,27.7L86.68,95.78c-19.8,19.8-23.3,39-13.2,51.4.7.8,1.4.3,1-.7-6.7-15.1,9.3-31.1,16.9-38.7Zm37.6,82.5-14.3,14.2c-6.5,6.5-12.3,12.4-15.8,18.4h14.1l1.7-1.7,20.5-20.5c17.1-16.9,19.5-35,15.8-46.8-.3-1-1.2-1.1-1.2,0,.1,9.9-2.8,18.4-20.8,36.4Zm-2.8-24-11.4,11.5c-10.4,10.4-19.1,19.4-19.1,29.11v15.3c0,.89,1.1.89,1.2,0,2.6-12.4,7.5-17.4,17.8-27.7L167,142.17c19.8-19.8,23.3-39,13.2-51.4-.7-.8-1.4-.3-1,.7C185.88,106.57,169.88,122.57,162.28,130.17Zm83.5,68.2h1.1l1.7,3h1.5l-2-3.3a2,2,0,0,0,1.3-2c0-1.5-.8-2.2-2.7-2.2h-2.2v7.5h1.3v-3Zm0-3.5h.8c1,0,1.4.3,1.4,1.2,0,.7-.5,1.2-1.4,1.2h-.9v-2.4Zm1,9a6.3,6.3,0,1,0-6.3-6.3,6.08,6.08,0,0,0,5.87,6.3Zm0-11.7a5.4,5.4,0,1,1,0,10.8,5.31,5.31,0,0,1-5.4-5.23h0v-.16a5.24,5.24,0,0,1,5.11-5.39h.29Z"/></svg>
          </span>
        </div>
        <!-- .c-drawer__logo -->
        <div class="c-drawer__about">
          <div class="c-drawer__about-left u-spacing">
            <p>Tell the world is an offical media production of the Seventh-day Adventist world church.</p>
            <p>Seventh-day Adventists are devoted to helping people understand the Bible to find freedom, healing and hope.</p>
          </div>
          <div class="c-drawer__about-right u-spacing--half">
            <h3 class="u-font--secondary--s u-text-transform--upper">
              <strong>Learn More:</strong>
            </h3>
            <p class="u-spacing--half">
              <a href="" target="_blank" class="u-link--white">Adventist.org</a>
              <a href="" target="_blank" class="u-link--white">North American Division of Seventh-day Adventists</a>
              <a href="" target="_blank" class="u-link--white">ADRA International</a>
            </p>
          </div>
        </div>
        <!-- .c-drawer__about -->
      </div>
      <!-- .c-drawer__container -->
    </div>
    <!-- .c-drawer-->
    
    
    <div class="c-drawer l-grid l-grid--7-col">
      <div class="c-drawer__toggle js-toggle-parent u-theme--background-color-trans--darker">
        <div class="u-icon o-icon__close">
          <span></span>
          <span></span>
        </div>
      </div>
      <!-- .c-drawer__toggle -->
      <div class="l-grid-wrap--6-of-7 l-grid-item--s--6-col c-drawer__container u-spacing u-theme--background-color--darker">
        <div class="c-drawer__search">
          {% include '@molecules/forms/search.twig' %}
        </div>
        <!-- .c-drawer__search -->
        <div class="c-drawer__nav">
          <div class="c-drawer__nav-primary">
            {% include '@molecules/navigation/primary-navigation.twig' %}
            <ul class="c-drawer__subnav u-theme--background-color--darker"></ul>
          </div>
          <div class="c-drawer__nav-secondary">
            {% include '@molecules/navigation/secondary-navigation.twig' %}
          </div>
        </div>
        <!-- .c-drawer__nav -->
        <div class="c-drawer__logo">
          <span class="u-icon u-icon--l u-path-fill--white">
            {% include '@atoms/icons/icon-logo.twig' %}
          </span>
        </div>
        <!-- .c-drawer__logo -->
        <div class="c-drawer__about">
          <div class="c-drawer__about-left u-spacing">
            <p>Tell the world is an offical media production of the Seventh-day Adventist world church.</p>
            <p>Seventh-day Adventists are devoted to helping people understand the Bible to find freedom, healing and hope.</p>
          </div>
          <div class="c-drawer__about-right u-spacing--half">
            <h3 class="u-font--secondary--s u-text-transform--upper">
              <strong>Learn More:</strong>
            </h3>
            <p class="u-spacing--half">
              <a href="" target="_blank" class="u-link--white">Adventist.org</a>
              <a href="" target="_blank" class="u-link--white">North American Division of Seventh-day Adventists</a>
              <a href="" target="_blank" class="u-link--white">ADRA International</a>
            </p>
          </div>
        </div>
        <!-- .c-drawer__about -->
      </div>
      <!-- .c-drawer__container -->
    </div>
    <!-- .c-drawer-->