The Local Navigation component depends on JavaScript interactions that are tied to the global header. For a complete reference of its behavior and visual presentation, see the homepage layout implementation.
<div class="tcu-nav _is-active">
<div class="tcu-nav__menu-panel">
<nav class="tcu-nav__menu">
<ul class="tcu-nav__main-menu">
<li class="tcu-nav__category">
<div class="tcu-nav__category-title-wrapper">
<a href="#">About</a>
<button class="tcu-nav__category-button" aria-haspopup="true" aria-expanded="true">
<div class="tcu-nav__category-button-icon">
<span class="show-for-sr">Contract About Menu</span>
</div>
</button>
</div>
<ul class="tcu-nav__dropdown-menu" aria-hidden="false">
<li><a href="#">Quick Facts</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Mission, Vision & Values</a></li>
<li><a href="#">Our Campus</a></li>
<li><a href="#">Traditions</a></li>
<li class="tcu-nav__has-dropdown">
<div class="tcu-nav__dropdown-title-wrapper">
<a href="#">Leadership</a>
<button class="tcu-nav__nesting-button" aria-haspopup="true" aria-expanded="true">
<div class="tcu-nav__nesting-button-icon">
<span class="show-for-sr">Contract Leadership Menu</span>
</div>
</button>
</div>
<ul class="tcu-nav__dropdown-menu" aria-hidden="false">
<li><a href="#">Our Chancellor</a></li>
<li><a href="#">Our President</a></li>
<li><a href="#">Our Provost</a></li>
<li><a href="#">Board of Trustees</a></li>
</ul>
</li>
<li><a href="#">Diversity, Equity & Inclusion</a></li>
<li><a href="#">Strategic Plan</a></li>
</ul>
</li>
<li class="tcu-nav__category">
<div class="tcu-nav__category-title-wrapper">
<a href="#">Academics</a>
<button class="tcu-nav__category-button" aria-haspopup="true" aria-expanded="true">
<div class="tcu-nav__category-button-icon">
<span class="show-for-sr">Contract Academics Menu</span>
</div>
</button>
</div>
<ul class="tcu-nav__dropdown-menu" aria-hidden="false">
<li><a href="#">Majors & Programs</a></li>
<li><a href="#">Colleges & Schools</a></li>
<li><a href="#">Centers & Institutes</a></li>
<li><a href="#">Study Abroad</a></li>
<li><a href="#">Career Center</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Academic Calendars</a></li>
<li><a href="#">Course Catalogs</a></li>
<li><a href="#">Research</a></li>
<li><a href="#">Phi Beta Kappa</a></li>
</ul>
</li>
<li class="tcu-nav__category">
<div class="tcu-nav__category-title-wrapper">
<a href="#">Admission & Aid</a>
<button class="tcu-nav__category-button" aria-haspopup="true" aria-expanded="true">
<div class="tcu-nav__category-button-icon">
<span class="show-for-sr">Contract Admission and Aid Menu</span>
</div>
</button>
</div>
<ul class="tcu-nav__dropdown-menu" aria-hidden="false">
<li><a href="#">Undergraduate</a></li>
<li><a href="#">Graduate</a></li>
<li><a href="#">International</a></li>
<li><a href="#">Tuition & Cost</a></li>
<li><a href="#">Scholarships</a></li>
<li><a href="#">Financial Aid</a></li>
</ul>
</li>
<li class="tcu-nav__category">
<div class="tcu-nav__category-title-wrapper">
<a href="#">Campus Life</a>
<button class="tcu-nav__category-button" aria-haspopup="true" aria-expanded="true">
<div class="tcu-nav__category-button-icon">
<span class="show-for-sr">Contract Campus Life Menu</span>
</div>
</button>
</div>
<ul class="tcu-nav__dropdown-menu" aria-hidden="false">
<li><a href="#">Housing & Dining</a></li>
<li><a href="#">Clubs & Organizations</a></li>
<li><a href="#">Health & Wellness</a></li>
<li><a href="#">Arts & Culture</a></li>
<li><a href="#">Diversity & Inclusion</a></li>
<li><a href="#">Spiritual Life</a></li>
<li><a href="#">Life In Fort Worth</a></li>
<li><a href="#">Campus Safety</a></li>
</ul>
</li>
<li class="tcu-nav__category">
<div class="tcu-nav__category-title-wrapper">
<a href="#">Athletics</a>
<button class="tcu-nav__category-button" aria-haspopup="true" aria-expanded="true">
<div class="tcu-nav__category-button-icon">
<span class="show-for-sr">Contract Athletics Menu</span>
</div>
</button>
</div>
<ul class="tcu-nav__dropdown-menu" aria-hidden="false">
<li><a href="#">GoFrogs.com</a></li>
<li><a href="#">Frog Club</a></li>
<li><a href="#">Tickets</a></li>
<li><a href="#">HFTV</a></li>
<li><a href="#">Licensing</a></li>
</ul>
</li>
</ul>
<div class="tcu-nav__secondary-menu">
</div>
<div class="tcu-nav__tertiary-menu">
<ul>
<li><a href="#">Calendar</a></li>
<li><a href="#">News</a></li>
<li><a href="#">A-Z Directory</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Giving</a></li>
</ul>
</div>
</nav>
</div>
<div class="tcu-static-panel-wrapper">
<div class="tcu-static-panel">
<div class="tcu-static-panel__cta">
<div class="tcu-static-panel__cta-title">
<div class="show-for-small-only">
<svg>
<title>Lead On.</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-lead-on-solid-stacked" href="#logo-lead-on-solid-stacked"></use>
</svg>
</div>
<div class="show-for-medium">
<svg>
<title>Lead On.</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-lead-on-solid" href="#logo-lead-on-solid"></use>
</svg>
</div>
</div>
<div class="button-group">
<a href="#" class="button hollow">Inquire</a>
<a href="#" class="button hollow">Visit</a>
<a href="#" class="button solid">Apply</a>
</div>
</div>
<div class="tcu-static-panel__footer">
<div class="tcu-static-panel__footer-logo">
<a class="tcu-logo" href="https://www.tcu.edu/" aria-label="Go to TCU homepage" rel="nofollow">
<svg>
<title>TCU Logo</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tcu-header-logo" href="#tcu-header-logo"></use>
</svg>
</a>
</div>
<div class="tcu-static-panel__footer-icons">
<ul>
<li>
<a href="#">
<svg>
<title>Facebook</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook" href="#icon-facebook"></use>
</svg>
</a>
</li>
<li>
<a href="#">
<svg>
<title>Tiktok</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tiktok" href="#icon-tiktok"></use>
</svg>
</a>
</li>
<li>
<a href="#">
<svg>
<title>Instagram</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-instagram" href="#icon-instagram"></use>
</svg>
</a>
</li>
<li>
<a href="#">
<svg>
<title>Twitter-x</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter-x" href="#icon-twitter-x"></use>
</svg>
</a>
</li>
<li>
<a href="#">
<svg>
<title>Threads</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-threads" href="#icon-threads"></use>
</svg>
</a>
</li>
<li>
<a href="#">
<svg>
<title>Youtube</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube" href="#icon-youtube"></use>
</svg>
</a>
</li>
<li>
<a href="#">
<svg>
<title>Linkedin</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-linkedin" href="#icon-linkedin"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<noscript>
<style>
.tcu-nav {
height: unset !important;
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
}
.tcu-nav__menu-panel {
height: unset !important;
}
.tcu-nav__main-menu {
opacity: 1 !important;
}
.tcu-nav__secondary-menu {
opacity: 1 !important;
}
.tcu-static-panel {
position: relative !important;
}
.tcu-static-panel__cta-title {
opacity: 1 !important;
}
.tcu-nav .button-group {
opacity: 1 !important;
}
.tcu-static-panel__footer {
opacity: 1 !important;
}
</style>
</noscript>