Header

The header pattern includes the University logo and search field. The header may also include audience-specific navigation links above the search bar.

Rules for the header

  • The header must be included at the top of all webpages.
  • The University logo used for the header must be the "Founded in 1413" variant in black.
  • The background colour of the header must always be white.

Options available

Default header

Must be used on all University webpages except the University homepage, School homepages, or web applications.

Example
Code 
<!-- Begin pattern: header //-->
<nav class="sr-only" aria-label="Accessibility links"><a href="#content-begin">Skip to content</a></nav>
<header id="header" class="">
    <div class="row" >
        <div id="logo-container">
            <div id="header-logo"><a href="https://www.st-andrews.ac.uk/"><span>University of St Andrews</span></a></div>
        </div>
        <div id="header-search">
            <button class="btn btn-link" id="header-search-trigger" name="btnG" aria-label="Toggle search" value=""><i class="fa fa-search" title="Search"></i></button>
            <form action="https://www.st-andrews.ac.uk/search" method="get" role="search" class="dpl-form">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-link" id="header-search-close" name="btnG" value="" aria-label="Hide search" type="button"><i class="fa fa-times" title="Close"></i></button>
                    </span>
                    <input id="query" class="form-control search-box" name="query" type="text" aria-label="Search by keyword or phrase, use arrow keys to move between suggested search terms" maxlength="256" placeholder="Search the University website" required/>
                    <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                    <span class="input-group-btn">
                        <button class="btn btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search" aria-label="Submit"><i class="fa fa-search" title="Search"></i></button>
                    </span>
                </div>
                <input type="hidden" name="collection" value="Uosa-meta-global">
                <input type="hidden" name="profile" value="_default">
                <input type="hidden" name="form" value="partial">
            </form>
        </div>
    </div>
</header>
<!-- End pattern: header //-->

University homepage header

Must be used only on the University homepage.

Example
Code 
<!-- Begin pattern: header //-->
<nav class="sr-only" aria-label="Accessibility links"><a href="#content-begin">Skip to content</a></nav>
<header id="header" class="header--audience">
    <div class="row" >
        <div id="header-audience">
                    <a class="audience" href="https://www.st-andrews.ac.uk/students/">Students</a>
                    <a class="audience" href="https://www.st-andrews.ac.uk/pgstudents/">Postgraduates</a>
                    <a class="audience" href="https://www.st-andrews.ac.uk/staff/">Staff</a>
        </div>
        <div id="logo-container">
            <div id="header-logo"><a href="https://www.st-andrews.ac.uk/"><span>University of St Andrews</span></a></div>
        </div>
        <div id="header-search">
            <button class="btn btn-link" id="header-search-trigger" name="btnG" aria-label="Toggle search" value=""><i class="fa fa-search" title="Search"></i></button>
            <form action="https://www.st-andrews.ac.uk/search" method="get" role="search" class="dpl-form">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-link" id="header-search-close" name="btnG" value="" aria-label="Hide search" type="button"><i class="fa fa-times" title="Close"></i></button>
                    </span>
                    <input id="query" class="form-control search-box" name="query" type="text" aria-label="Search by keyword or phrase, use arrow keys to move between suggested search terms" maxlength="256" placeholder="Search the University website" required/>
                    <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                    <span class="input-group-btn">
                        <button class="btn btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search" aria-label="Submit"><i class="fa fa-search" title="Search"></i></button>
                    </span>
                </div>
                <input type="hidden" name="collection" value="Uosa-meta-global">
                <input type="hidden" name="profile" value="_default">
                <input type="hidden" name="form" value="partial">
            </form>
        </div>
    </div>
</header>
<!-- End pattern: header //-->

School header

Must be used on every page within a School website.

Example
Code 
<!-- Begin pattern: header //-->
<nav class="sr-only" aria-label="Accessibility links"><a href="#content-begin">Skip to content</a></nav>
<header id="header" class="header--audience">
    <div class="row" >
        <div id="header-audience">
                    <a class="audience" href="#">Current students</a>
                    <a class="audience" href="#">Current staff</a>
        </div>
        <div id="logo-container">
            <div id="header-logo"><a href="https://www.st-andrews.ac.uk/"><span>University of St Andrews</span></a></div>
        </div>
        <div id="header-search">
            <button class="btn btn-link" id="header-search-trigger" name="btnG" aria-label="Toggle search" value=""><i class="fa fa-search" title="Search"></i></button>
            <form action="https://www.st-andrews.ac.uk/search" method="get" role="search" class="dpl-form">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-link" id="header-search-close" name="btnG" value="" aria-label="Hide search" type="button"><i class="fa fa-times" title="Close"></i></button>
                    </span>
                    <input id="query" class="form-control search-box" name="query" type="text" aria-label="Search by keyword or phrase, use arrow keys to move between suggested search terms" maxlength="256" placeholder="Search the University website" required/>
                    <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                    <span class="input-group-btn">
                        <button class="btn btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search" aria-label="Submit"><i class="fa fa-search" title="Search"></i></button>
                    </span>
                </div>
                <input type="hidden" name="collection" value="Uosa-meta-global">
                <input type="hidden" name="profile" value="_default">
                <input type="hidden" name="form" value="partial">
            </form>
        </div>
    </div>
</header>
<!-- End pattern: header //-->

Authenticated header

When a user is authenticated, the header should be altered to include:

  • the name of the person logged in
  • any user-specific links they may have access to
  • alink to logout.

Example
Code 
<!-- Begin pattern: header //-->
<nav class="sr-only" aria-label="Accessibility links"><a href="#content-begin">Skip to content</a></nav>
<header id="header" class="">
    <div class="row" >
        <div  id="header-authenticated">
            <div class="btn-group">
                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">Josef&nbsp;Smith</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Email</a></li>
                    <li><a href="#">MMS</a></li>
                    <li><a href="#">Moodle</a></li>
                    <li><a href="#">MySaint</a></li>
                    <li role="presentation" class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out" title="Sign-out"></i> Log out</a></li>
                </ul>
            </div>
        </div>
            <div class="clear"></div>
        <div id="logo-container">
            <div id="header-logo"><a href="https://www.st-andrews.ac.uk/"><span>University of St Andrews</span></a></div>
        </div>
        <div id="header-search">
            <button class="btn btn-link" id="header-search-trigger" name="btnG" aria-label="Toggle search" value=""><i class="fa fa-search" title="Search"></i></button>
            <form action="https://www.st-andrews.ac.uk/search" method="get" role="search" class="dpl-form">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-link" id="header-search-close" name="btnG" value="" aria-label="Hide search" type="button"><i class="fa fa-times" title="Close"></i></button>
                    </span>
                    <input id="query" class="form-control search-box" name="query" type="text" aria-label="Search by keyword or phrase, use arrow keys to move between suggested search terms" maxlength="256" placeholder="Search the University website" required/>
                    <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                    <span class="input-group-btn">
                        <button class="btn btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search" aria-label="Submit"><i class="fa fa-search" title="Search"></i></button>
                    </span>
                </div>
                <input type="hidden" name="collection" value="Uosa-meta-global">
                <input type="hidden" name="profile" value="_default">
                <input type="hidden" name="form" value="partial">
            </form>
        </div>
    </div>
</header>
<!-- End pattern: header //-->

Mini authenticated header - deprecated

This option is no longer supported

This pattern is deprecated and will be removed in a future version of the digital pattern library.

This condensed header must be used only on web applications.

Example
Code 
<!-- Begin pattern: header //-->
<nav class="sr-only" aria-label="Accessibility links"><a href="#content-begin">Skip to content</a></nav>
<header id="header" class="">
    <div class="row" >
        <div class="web-application-header" id="header-authenticated">
            <div class="btn-group">
                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">Josef&nbsp;Smith</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Email</a></li>
                    <li><a href="#">MMS</a></li>
                    <li><a href="#">Moodle</a></li>
                    <li><a href="#">MySaint</a></li>
                    <li role="presentation" class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out" title="Sign-out"></i> Log out</a></li>
                </ul>
            </div>
        </div>
    <div id="logo-container">
        <div id="web-application-header-logo"><h1><a href="https://www.st-andrews.ac.uk/"><span>University of St Andrews</span></a></h1></div>
    </div>
    </div>
</header>
<!-- End pattern: header //-->