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.

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/" aria-label="University of St Andrews"><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" aria-hidden="true"></i><span class="sr-only">Toggle search</span></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-lg btn-link" id="header-search-close" name="btnG" value="" aria-label="Hide search" type="button"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Hide search</span></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-lg btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search" aria-label="Submit"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Submit</span></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/" aria-label="University of St Andrews"><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" aria-hidden="true"></i><span class="sr-only">Toggle search</span></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-lg btn-link" id="header-search-close" name="btnG" value="" aria-label="Hide search" type="button"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Hide search</span></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-lg btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search" aria-label="Submit"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Submit</span></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/" aria-label="University of St Andrews"><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" aria-hidden="true"></i><span class="sr-only">Toggle search</span></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-lg btn-link" id="header-search-close" name="btnG" value="" aria-label="Hide search" type="button"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Hide search</span></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-lg btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search" aria-label="Submit"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Submit</span></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/" aria-label="University of St Andrews"><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" aria-hidden="true"></i><span class="sr-only">Toggle search</span></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-lg btn-link" id="header-search-close" name="btnG" value="" aria-label="Hide search" type="button"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Hide search</span></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-lg btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search" aria-label="Submit"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Submit</span></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/" aria-label="University of St Andrews"><span>University of St Andrews</span></a></h1></div>
    </div>
    </div>
</header>
<!-- End pattern: header //-->