Davidson Styleguide

Section Nav 

<div class="section-nav-toggle">
    <button class="button toggle-button" data-toggle-viz="true" data--keys="toggle,toggle_class,toggle_viz" data-toggle-class="section-nav--expanded" data-toggle="#block-mainnavigation-5" aria-pressed="false" -keys="aria_pressed"><span class="icon "><span class="icon__glyph ic ic--close" aria-hidden="true"></span><span class="icon__label">In this section</span></span></button>
</div>
<!-- this section navigation was extracted from Drupal pretty much whole-cloth -->
<nav class="section-nav" role="navigation" aria-labelledby="block-mainnavigation-5-menu" id="block-mainnavigation-5" class="contextual-region" data-toggler="expanded">
    <h2 id="block-mainnavigation-5-menu"><a href="/offices-services" title="Description of noruvi." tabindex="-1">Offices
      &amp; Services</a></h2>
    <ul>
        <li class="has_children">
            <div class="menu-label">
                <a href="/offices-services/academic-access-disability-resources" data-drupal-link-system-path="node/1946">Academic Access &amp; Disability Resources</a>
                <button data-toggle="#menu-5c2691c229d2a" data-toggle-label="+" data-toggle-viz="true" data-toggle-toggled-label="-" aria-controls="menu-5c2691c229d2a" aria-expanded="false"><span class="label">+</span></button>
            </div>
            <ul id="menu-5c2691c229d2a" hidden="" aria-hidden="hidden">
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/academic-access-disability-resources/academic-access" data-drupal-link-system-path="node/2093">Academic Access</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/academic-access-disability-resources/disability-resources" data-drupal-link-system-path="node/2094">Disability Resources</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/academic-access-disability-resources/academic-access-and-disability-resources" data-drupal-link-system-path="node/2095">Staff</a>
                    </div>
                </li>
            </ul>

        </li>
        <li class="has_children">
            <div class="menu-label">
                <a href="/offices-services/academic-affairs" data-drupal-link-system-path="node/1947">Academic Affairs</a>
                <button data-toggle="#menu-5c2691c22a4d4" data-toggle-label="+" data-toggle-viz="true" data-toggle-toggled-label="-" aria-controls="menu-5c2691c22a4d4" aria-expanded="false"><span class="label">+</span></button>
            </div>
            <ul id="menu-5c2691c22a4d4" hidden="" aria-hidden="hidden">
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/academic-affairs/pre-major-advising" data-drupal-link-system-path="node/2098">Pre-Major Advising</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/academic-affairs/quality-enhancement-plan" data-drupal-link-system-path="node/2097">Quality Enhancement Plan</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/academic-affairs/academic-affairs-staff" data-drupal-link-system-path="node/2096">Academic Affairs Staff</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/academic-affairs/phi-beta-kappa" data-drupal-link-system-path="node/2100">Phi Beta Kappa</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/academic-affairs/research-davidson" data-drupal-link-system-path="node/2099">Research at Davidson</a>
                    </div>
                </li>
            </ul>

        </li>
        <li class="has_children active">
            <div class="menu-label">
                <a href="/offices-services/admission-financial-aid" data-drupal-link-system-path="node/1948">Admission &amp; Financial Aid</a>
                <button data-toggle="#menu-5c2691c22aeee" data-toggle-label="+" data-toggle-viz="true" data-toggle-toggled-label="-" aria-controls="menu-5c2691c22aeee" aria-expanded="true"><span class="label">-</span></button>
            </div>
            <ul id="menu-5c2691c22aeee" class="menu--expanded">
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/apply" data-drupal-link-system-path="node/2102">Apply</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/contact-us" data-drupal-link-system-path="node/2110">Contact Us</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/counselor-resources" data-drupal-link-system-path="node/2109">Counselor Resources</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/diversity" data-drupal-link-system-path="node/2111">Diversity</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/financial-aid" data-drupal-link-system-path="node/2104">Financial Aid</a>
                    </div>
                </li>
                <li class="active">
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/frequently-asked-questions" data-drupal-link-system-path="node/2107" class="is-active">Frequently Asked Questions</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/plan-visit" data-drupal-link-system-path="node/2103">Plan a Visit</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="https://admission.davidson.edu/register/requestinfo">Request Information</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/scholarships" data-drupal-link-system-path="node/2106">Scholarships</a>
                    </div>
                </li>
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/admission-financial-aid/tuition-fees" data-drupal-link-system-path="node/2105">Tuition &amp; Fees</a>
                    </div>
                </li>
            </ul>

        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/advanced-placement-summer-institute" data-drupal-link-system-path="node/1949">Advanced Placement Summer Institute</a>
            </div>
        </li>
        <li class="has_children">
            <div class="menu-label">
                <a href="/offices-services/animal-care-use" data-drupal-link-system-path="node/1950">Animal Care &amp; Use</a>
                <button data-toggle="#menu-5c2691c22c173" data-toggle-label="+" data-toggle-viz="true" data-toggle-toggled-label="-" aria-controls="menu-5c2691c22c173" aria-expanded="false"><span class="label">+</span></button>
            </div>
            <ul id="menu-5c2691c22c173" hidden="" aria-hidden="hidden">
                <li>
                    <div class="menu-label">
                        <a href="/offices-services/animal-care-use/policy-animal-care-use" data-drupal-link-system-path="node/2112">Policy for Animal Care &amp; Use</a>
                    </div>
                </li>
            </ul>

        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/auxiliary-services" data-drupal-link-system-path="node/1951">Auxiliary Services</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/business-services" data-drupal-link-system-path="node/1952">Business Services</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/carnegie-guest-house" data-drupal-link-system-path="node/1955">Carnegie Guest House</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/catcard-services" data-drupal-link-system-path="node/1956">CatCard Services</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/catering" data-drupal-link-system-path="node/1957">Catering</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/center-career-development" data-drupal-link-system-path="node/1954">Center for Career Development</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/central-services-and-campus-post-office" data-drupal-link-system-path="node/1959">Central Services and Campus Post Office</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/civic-engagement" data-drupal-link-system-path="node/1962">Civic Engagement</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/college-insurance-risk-management" data-drupal-link-system-path="node/1982">College Insurance &amp; Risk Management</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/college-relations" data-drupal-link-system-path="node/1963">College Relations</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/davidson-next" data-drupal-link-system-path="node/1964">Davidson Next</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/dean-rusk-international-studies-program" data-drupal-link-system-path="node/1966">Dean Rusk International Studies Program</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/dean-students" data-drupal-link-system-path="node/1965">Dean of Students</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/dining-services" data-drupal-link-system-path="node/1967">Dining Services</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/diversity-and-inclusion" data-drupal-link-system-path="node/1968">Diversity and Inclusion</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/education-abroad" data-drupal-link-system-path="node/1969">Education Abroad</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/environmental-health-safety" data-drupal-link-system-path="node/1970">Environmental Health &amp; Safety</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/fellowships-and-scholarships" data-drupal-link-system-path="node/1972">Fellowships and Scholarships</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/finance-administration" data-drupal-link-system-path="node/1973">Finance &amp; Administration</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/financial-aid" data-drupal-link-system-path="node/1974">Financial Aid</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/grants-contracts" data-drupal-link-system-path="node/1975">Grants &amp; Contracts</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/guest-services" data-drupal-link-system-path="node/1976">Guest Services</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/health-counseling" data-drupal-link-system-path="node/1977">Health &amp; Counseling</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/housing-relocation" data-drupal-link-system-path="node/1978">Housing &amp; Relocation</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/human-resources" data-drupal-link-system-path="node/1979">Human Resources</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/human-subjects-irb" data-drupal-link-system-path="node/1980">Human Subjects IRB</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/institutional-research" data-drupal-link-system-path="node/1981">Institutional Research</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/investment-office" data-drupal-link-system-path="node/1983">Investment Office</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/john-crosland-jr-center-teaching-learning" data-drupal-link-system-path="node/1958">John Crosland Jr. Center for Teaching &amp; Learning</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/july-experience" data-drupal-link-system-path="node/1984">July Experience</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/laundry-self-service-facilities" data-drupal-link-system-path="node/1985">Laundry Self-Service Facilities</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/library" data-drupal-link-system-path="node/1986">Library</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/mail-processing-center" data-drupal-link-system-path="node/1987">Mail Processing Center</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/message-president-quillen" data-drupal-link-system-path="node/1990">Message from President Quillen</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/motor-pool-services" data-drupal-link-system-path="node/1988">Motor Pool Services</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/physical-plant" data-drupal-link-system-path="node/1989">Physical Plant</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/public-safety" data-drupal-link-system-path="node/1953">Public Safety</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/registrar" data-drupal-link-system-path="node/1991">Registrar</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/religious-spiritual-life" data-drupal-link-system-path="node/1960">Religious &amp; Spiritual Life</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/residence-life" data-drupal-link-system-path="node/1992">Residence Life</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/staff-council" data-drupal-link-system-path="node/1993">Staff Council</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/student-activities" data-drupal-link-system-path="node/1994">Student Activities</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/sustainability-office" data-drupal-link-system-path="node/1995">Sustainability Office</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/technology-innovation" data-drupal-link-system-path="node/1996">Technology &amp; Innovation</a>
            </div>
        </li>
        <li>
            <div class="menu-label">
                <a href="/offices-services/farm-davidson" data-drupal-link-system-path="node/1971">The Farm at Davidson</a>
            </div>
        </li>
    </ul>
</nav>
 
<div class="section-nav-toggle">
  {% include '@toggle-button' with { toggle: {
    variant: 'toggle-button',
    data_obj: {
      toggle: '#block-mainnavigation-5',
      toggle_class: 'section-nav--expanded',
      toggle_viz: 'true',
    },
    attr_obj: {
      aria_pressed: 'false',
    },
    icon: {
      glyph: 'ic--close',
      label: 'In this section',
    },
  } } %}
</div>
<!-- this section navigation was extracted from Drupal pretty much whole-cloth -->
<nav class="section-nav" role="navigation" aria-labelledby="block-mainnavigation-5-menu" id="block-mainnavigation-5"
  class="contextual-region" data-toggler="expanded">
  <h2 id="block-mainnavigation-5-menu"><a href="/offices-services" title="Description of noruvi." tabindex="-1">Offices
      &amp; Services</a></h2>
<ul>
                    <li class="has_children">
        <div class="menu-label">
        <a href="/offices-services/academic-access-disability-resources" data-drupal-link-system-path="node/1946">Academic Access &amp; Disability Resources</a> 
                                                <button data-toggle="#menu-5c2691c229d2a" data-toggle-label="+" data-toggle-viz="true" data-toggle-toggled-label="-" aria-controls="menu-5c2691c229d2a" aria-expanded="false"><span class="label">+</span></button>
                </div>
                                <ul id="menu-5c2691c229d2a" hidden="" aria-hidden="hidden">
                    <li>
        <div class="menu-label">
        <a href="/offices-services/academic-access-disability-resources/academic-access" data-drupal-link-system-path="node/2093">Academic Access</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/academic-access-disability-resources/disability-resources" data-drupal-link-system-path="node/2094">Disability Resources</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/academic-access-disability-resources/academic-access-and-disability-resources" data-drupal-link-system-path="node/2095">Staff</a> 
                </div>
              </li>
        </ul>
  
              </li>
                <li class="has_children">
        <div class="menu-label">
        <a href="/offices-services/academic-affairs" data-drupal-link-system-path="node/1947">Academic Affairs</a> 
                                                <button data-toggle="#menu-5c2691c22a4d4" data-toggle-label="+" data-toggle-viz="true" data-toggle-toggled-label="-" aria-controls="menu-5c2691c22a4d4" aria-expanded="false"><span class="label">+</span></button>
                </div>
                                <ul id="menu-5c2691c22a4d4" hidden="" aria-hidden="hidden">
                    <li>
        <div class="menu-label">
        <a href="/offices-services/academic-affairs/pre-major-advising" data-drupal-link-system-path="node/2098">Pre-Major Advising</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/academic-affairs/quality-enhancement-plan" data-drupal-link-system-path="node/2097">Quality Enhancement Plan</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/academic-affairs/academic-affairs-staff" data-drupal-link-system-path="node/2096">Academic Affairs Staff</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/academic-affairs/phi-beta-kappa" data-drupal-link-system-path="node/2100">Phi Beta Kappa</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/academic-affairs/research-davidson" data-drupal-link-system-path="node/2099">Research at Davidson</a> 
                </div>
              </li>
        </ul>
  
              </li>
                <li class="has_children active">
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid" data-drupal-link-system-path="node/1948">Admission &amp; Financial Aid</a> 
                                                <button data-toggle="#menu-5c2691c22aeee" data-toggle-label="+" data-toggle-viz="true" data-toggle-toggled-label="-" aria-controls="menu-5c2691c22aeee" aria-expanded="true"><span class="label">-</span></button>
                </div>
                                <ul id="menu-5c2691c22aeee" class="menu--expanded">
                    <li>
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/apply" data-drupal-link-system-path="node/2102">Apply</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/contact-us" data-drupal-link-system-path="node/2110">Contact Us</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/counselor-resources" data-drupal-link-system-path="node/2109">Counselor Resources</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/diversity" data-drupal-link-system-path="node/2111">Diversity</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/financial-aid" data-drupal-link-system-path="node/2104">Financial Aid</a> 
                </div>
              </li>
                <li class="active">
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/frequently-asked-questions" data-drupal-link-system-path="node/2107" class="is-active">Frequently Asked Questions</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/plan-visit" data-drupal-link-system-path="node/2103">Plan a Visit</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="https://admission.davidson.edu/register/requestinfo">Request Information</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/scholarships" data-drupal-link-system-path="node/2106">Scholarships</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/admission-financial-aid/tuition-fees" data-drupal-link-system-path="node/2105">Tuition &amp; Fees</a> 
                </div>
              </li>
        </ul>
  
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/advanced-placement-summer-institute" data-drupal-link-system-path="node/1949">Advanced Placement Summer Institute</a> 
                </div>
              </li>
                <li class="has_children">
        <div class="menu-label">
        <a href="/offices-services/animal-care-use" data-drupal-link-system-path="node/1950">Animal Care &amp; Use</a> 
                                                <button data-toggle="#menu-5c2691c22c173" data-toggle-label="+" data-toggle-viz="true" data-toggle-toggled-label="-" aria-controls="menu-5c2691c22c173" aria-expanded="false"><span class="label">+</span></button>
                </div>
                                <ul id="menu-5c2691c22c173" hidden="" aria-hidden="hidden">
                    <li>
        <div class="menu-label">
        <a href="/offices-services/animal-care-use/policy-animal-care-use" data-drupal-link-system-path="node/2112">Policy for Animal Care &amp; Use</a> 
                </div>
              </li>
        </ul>
  
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/auxiliary-services" data-drupal-link-system-path="node/1951">Auxiliary Services</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/business-services" data-drupal-link-system-path="node/1952">Business Services</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/carnegie-guest-house" data-drupal-link-system-path="node/1955">Carnegie Guest House</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/catcard-services" data-drupal-link-system-path="node/1956">CatCard Services</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/catering" data-drupal-link-system-path="node/1957">Catering</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/center-career-development" data-drupal-link-system-path="node/1954">Center for Career Development</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/central-services-and-campus-post-office" data-drupal-link-system-path="node/1959">Central Services and Campus Post Office</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/civic-engagement" data-drupal-link-system-path="node/1962">Civic Engagement</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/college-insurance-risk-management" data-drupal-link-system-path="node/1982">College Insurance &amp; Risk Management</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/college-relations" data-drupal-link-system-path="node/1963">College Relations</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/davidson-next" data-drupal-link-system-path="node/1964">Davidson Next</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/dean-rusk-international-studies-program" data-drupal-link-system-path="node/1966">Dean Rusk International Studies Program</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/dean-students" data-drupal-link-system-path="node/1965">Dean of Students</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/dining-services" data-drupal-link-system-path="node/1967">Dining Services</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/diversity-and-inclusion" data-drupal-link-system-path="node/1968">Diversity and Inclusion</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/education-abroad" data-drupal-link-system-path="node/1969">Education Abroad</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/environmental-health-safety" data-drupal-link-system-path="node/1970">Environmental Health &amp; Safety</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/fellowships-and-scholarships" data-drupal-link-system-path="node/1972">Fellowships and Scholarships</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/finance-administration" data-drupal-link-system-path="node/1973">Finance &amp; Administration</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/financial-aid" data-drupal-link-system-path="node/1974">Financial Aid</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/grants-contracts" data-drupal-link-system-path="node/1975">Grants &amp; Contracts</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/guest-services" data-drupal-link-system-path="node/1976">Guest Services</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/health-counseling" data-drupal-link-system-path="node/1977">Health &amp; Counseling</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/housing-relocation" data-drupal-link-system-path="node/1978">Housing &amp; Relocation</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/human-resources" data-drupal-link-system-path="node/1979">Human Resources</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/human-subjects-irb" data-drupal-link-system-path="node/1980">Human Subjects IRB</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/institutional-research" data-drupal-link-system-path="node/1981">Institutional Research</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/investment-office" data-drupal-link-system-path="node/1983">Investment Office</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/john-crosland-jr-center-teaching-learning" data-drupal-link-system-path="node/1958">John Crosland Jr. Center for Teaching &amp; Learning</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/july-experience" data-drupal-link-system-path="node/1984">July Experience</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/laundry-self-service-facilities" data-drupal-link-system-path="node/1985">Laundry Self-Service Facilities</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/library" data-drupal-link-system-path="node/1986">Library</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/mail-processing-center" data-drupal-link-system-path="node/1987">Mail Processing Center</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/message-president-quillen" data-drupal-link-system-path="node/1990">Message from President Quillen</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/motor-pool-services" data-drupal-link-system-path="node/1988">Motor Pool Services</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/physical-plant" data-drupal-link-system-path="node/1989">Physical Plant</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/public-safety" data-drupal-link-system-path="node/1953">Public Safety</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/registrar" data-drupal-link-system-path="node/1991">Registrar</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/religious-spiritual-life" data-drupal-link-system-path="node/1960">Religious &amp; Spiritual Life</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/residence-life" data-drupal-link-system-path="node/1992">Residence Life</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/staff-council" data-drupal-link-system-path="node/1993">Staff Council</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/student-activities" data-drupal-link-system-path="node/1994">Student Activities</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/sustainability-office" data-drupal-link-system-path="node/1995">Sustainability Office</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/technology-innovation" data-drupal-link-system-path="node/1996">Technology &amp; Innovation</a> 
                </div>
              </li>
                <li>
        <div class="menu-label">
        <a href="/offices-services/farm-davidson" data-drupal-link-system-path="node/1971">The Farm at Davidson</a> 
                </div>
              </li>
        </ul>
</nav>
 
{
  "section_nav": {
    "header_link": {
      "url": "http://www.example.com",
      "title": "Parent Page / Section"
    },
    "active_link": {
      "title": "Currently active link",
      "url": "http://www.example.com",
      "attrs": {
        "aria-current": "page"
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text"
    }
  }
}
  • Content: 
    .section-nav {

  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    @include rr-font-compute(l, medium);
  }

  .menu-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em 0;
    font-family: $font-rubik;
    font-weight: 500;
  }

  a {
    text-decoration: none;

    &.is-active {
      color: color(davidson-red);
      pointer-events: none;
    }

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }

  ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;

    ul {
      margin-left: .5em;
      padding-left: .8em;
      border-left: 1px color(davidson-red) solid;
      li {
        .menu-label {
          font-weight: normal;
        }
      }

      ul {
        margin-left: 0;
        border-left-width: 0;
        font-weight: normal;
      }
    }
  }

  li {
    @include rr-font-compute(r, medium);
  }

  button {
    position: relative;
    top: -2px;
    flex: 0 0 rem(21px);
    margin-left: 1rem;
    padding: 0;
    border-width: 1px;
    border-radius: 50%;
    border-color: color(dark-teal);
    color: color(dark-teal);
    font-size: 1rem;
    line-height: rem(19px);

    &:focus {
      background-color: color(dark-teal);
      color: color(davidson-white);
    }

    &[aria-expanded='true'] {
      border-color: color(davidson-red);
      color: color(davidson-red);

      
      &:hover,
      &:focus {
        background-color: color(davidson-red);
        color: color(davidson-white);
      }
    }

    &::before {
      display: none;
    }

    .label {
      display: inline-block;
      width: 100%;
      text-align: center;
    }
  }
}

.section-nav-toggle {
  button {
    .icon {
      .icon__label {
        margin-right: .55em;
      }
      .icon__glyph {
        order: 2;
        margin-right: 0;
        transform: rotate(135deg);
        transition: transform 0.3s ease-in-out;
        font-size: rem(16px);
      }
    }
    &[aria-expanded="true"] {
      .icon {
        .icon__glyph {
          transform: rotate(0deg);
        }
      }
    }
  }
}

// Responsive visibility.
.section-nav {
  display: none;
  &.section-nav--expanded {
    display: block;
  }
}
@include rr-break-directive(l) {
  .section-nav-toggle {
    display: none;
  }
  .section-nav {
    display: block;
  }
}
  • URL: /components/raw/section-nav/section-nav.scss
  • Filesystem Path: patterns/molecules/navigation/section-nav/section-nav.scss
  • Size: 2.3 KB

Section Nav

Section navigation is a menu structure. It can display a parent page, current page, sibling pages, and child pages.

For all pages with section navigation:

  • Backlink to parent page shows. If this is the home page it should read “Home.”
  • The current page is shown.
  • Sibling pages are shown on desktop only. They are hidden in the mobile section navigation. This is handled with CSS.
  • Child pages are shown indented under the current page.