Site Header

The header module that contains the main title of the the college, the page banner and local navigation specific to the college.

<header class="tcu-content-header | tcu-site-header">
    <section class="tcu-hero-text | tcu-site-name">
        <div class="tcu-hero-text__heading | tcu-site-name__heading" itemprop="name"><a href="#">College Name</a>
        </div>
    </section>
    <a href="#" class="tcu-skip-nav tcu-visuallyhidden">Skip to main content</a>
    <div class="tcu-local-nav">
        <button class="js-nav-toggle" data-state=""><span>Menu</span>
            <svg class="tcu-button-arrow" height="15" width="15" version="1.1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-77 10 20 11" enable-background="new -77 10 20 11" xml:space="preserve">
                <path fill="#fff" d="M-58.7,10.3l-8.3,8.3l-8.3-8.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l9,9l0,0l0,0c0.4,0.4,1,0.4,1.4,0l9-9c0.4-0.4,0.4-1,0-1.4C-57.7,9.9-58.3,9.9-58.7,10.3z">
                </path>
            </svg>
        </button>
        <div class="nav-wrapper">
            <nav class="tcu-main-navigation" role="navigation">
                <ul class="tcu-menu" role="menubar">
                    <li role="menuitem"><a href="#">Home</a></li>
                    <li role="menuitem" class="has-dropdown"><a href="#">About</a>
                        <button>
                            <svg class="tcu-button-arrow" height="15" width="15" version="1.1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-77 10 20 11" enable-background="new -77 10 20 11" xml:space="preserve">
                                <path fill="#fff" d="M-58.7,10.3l-8.3,8.3l-8.3-8.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l9,9l0,0l0,0c0.4,0.4,1,0.4,1.4,0l9-9c0.4-0.4,0.4-1,0-1.4C-57.7,9.9-58.3,9.9-58.7,10.3z">
                                </path>
                            </svg>
                        </button>
                        <div class="sub-menu-wrapper">
                            <ul class="sub-menu" role="menubar">
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem" class="has-dropdown"><a href="#">Link Level 1</a>
                                    <ul class="sub-menu" role="menubar">
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem" class="has-dropdown"><a href="#">Link Level 2</a>
                                            <ul class="sub-menu" role="menubar">
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                            </ul>
                                        </li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                    </ul>
                                </li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                            </ul>
                        </div>
                    </li>
                    <li role="menuitem" class="has-dropdown"><a href="#">Academics</a>
                        <button>
                            <svg class="tcu-button-arrow" height="15" width="15" version="1.1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-77 10 20 11" enable-background="new -77 10 20 11" xml:space="preserve">
                                <path fill="#fff" d="M-58.7,10.3l-8.3,8.3l-8.3-8.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l9,9l0,0l0,0c0.4,0.4,1,0.4,1.4,0l9-9c0.4-0.4,0.4-1,0-1.4C-57.7,9.9-58.3,9.9-58.7,10.3z">
                                </path>
                            </svg>
                        </button>
                        <div class="sub-menu-wrapper">
                            <ul class="sub-menu" role="menubar">
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem" class="has-dropdown"><a href="#">Link Level 1</a>
                                    <ul class="sub-menu" role="menubar">
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem" class="has-dropdown"><a href="#">Link Level 2</a>
                                            <ul class="sub-menu" role="menubar">
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                            </ul>
                                        </li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                    </ul>
                                </li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                            </ul>
                        </div>
                    </li>
                    <li role="menuitem" class="has-dropdown"><a href="#">Research & Outreach</a>
                        <button>
                            <svg class="tcu-button-arrow" height="15" width="15" version="1.1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-77 10 20 11" enable-background="new -77 10 20 11" xml:space="preserve">
                                <path fill="#fff" d="M-58.7,10.3l-8.3,8.3l-8.3-8.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l9,9l0,0l0,0c0.4,0.4,1,0.4,1.4,0l9-9c0.4-0.4,0.4-1,0-1.4C-57.7,9.9-58.3,9.9-58.7,10.3z">
                                </path>
                            </svg>
                        </button>
                        <div class="sub-menu-wrapper">
                            <ul class="sub-menu" role="menubar">
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem" class="has-dropdown"><a href="#">Link Level 1</a>
                                    <ul class="sub-menu" role="menubar">
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem" class="has-dropdown"><a href="#">Link Level 2</a>
                                            <ul class="sub-menu" role="menubar">
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                            </ul>
                                        </li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                    </ul>
                                </li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                            </ul>
                        </div>
                    </li>
                    <li role="menuitem" class="has-dropdown"><a href="#">Lab Schools</a>
                        <button>
                            <svg class="tcu-button-arrow" height="15" width="15" version="1.1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-77 10 20 11" enable-background="new -77 10 20 11" xml:space="preserve">
                                <path fill="#fff" d="M-58.7,10.3l-8.3,8.3l-8.3-8.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l9,9l0,0l0,0c0.4,0.4,1,0.4,1.4,0l9-9c0.4-0.4,0.4-1,0-1.4C-57.7,9.9-58.3,9.9-58.7,10.3z">
                                </path>
                            </svg>
                        </button>
                        <div class="sub-menu-wrapper">
                            <ul class="sub-menu" role="menubar">
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem" class="has-dropdown"><a href="#">Link Level 1</a>
                                    <ul class="sub-menu" role="menubar">
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem" class="has-dropdown"><a href="#">Link Level 2</a>
                                            <ul class="sub-menu" role="menubar">
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                            </ul>
                                        </li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                    </ul>
                                </li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                            </ul>
                        </div>
                    </li>
                    <li role="menuitem" class="has-dropdown"><a href="#">Impact</a>
                        <button>
                            <svg class="tcu-button-arrow" height="15" width="15" version="1.1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-77 10 20 11" enable-background="new -77 10 20 11" xml:space="preserve">
                                <path fill="#fff" d="M-58.7,10.3l-8.3,8.3l-8.3-8.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l9,9l0,0l0,0c0.4,0.4,1,0.4,1.4,0l9-9c0.4-0.4,0.4-1,0-1.4C-57.7,9.9-58.3,9.9-58.7,10.3z">
                                </path>
                            </svg>
                        </button>
                        <div class="sub-menu-wrapper">
                            <ul class="sub-menu" role="menubar">
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem" class="has-dropdown"><a href="#">Link Level 1</a>
                                    <ul class="sub-menu" role="menubar">
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem" class="has-dropdown"><a href="#">Link Level 2</a>
                                            <ul class="sub-menu" role="menubar">
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                                <li role="menuitem"><a href="#">Link Level 3</a></li>
                                            </ul>
                                        </li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                        <li role="menuitem"><a href="#">Link Level 2</a></li>
                                    </ul>
                                </li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                                <li role="menuitem"><a href="#">Link Level 1</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- / .nav-wrapper -->
    </div>
    <!-- / .tcu-local-nav -->
</header>