Skip to main content
live This is a new website – your feedback will help us to improve it.

Standard header

Overview

The standard header pattern gives users important information about the service they are using.

If you are using one of the Style Kit’s themes or templates, this pattern is included in the Style Kit standard layout.

Uses

All websites should use this pattern.

When using this pattern, do:

  • include a link to a cookie notice or management page in the cookie notice alert
  • link the website name to the home page of the current website
  • add other, relevant, websites to the ‘part of British Antarctic Survey’ links
  • indicate where a website is under development or used for testing
  • include a link to give feedback where a website is under development or used for testing

When using this pattern, do not:

  • omit the cookie notice alert if cookies are used by a website for non-essential tasks
    • cookies for session management are essential to the operation of the service and so don’t need a cookie notice
    • cookies for analytics are not essential (though may be very useful) and so require a cookie notice
  • link the website name to the main BAS website - this is included in the ‘Part of British Antarctic Survey’ links
  • remove links to the main BAS website and BAS data catalogue from the ‘Part of British Antarctic Survey’ links

Under the Privacy and Electronic Communications Regulations (PECR) , a cookie notice MUST be included if non-essential cookies are used.

How it works

A standard header consists of:

  1. a cookie notice, if non-required cookies are used
  2. primary navigation, including the name of the website and links to other important BAS websites
  3. a notice about whether the website is in alpha, beta or testing, if applicable

Components

The standard header pattern consists of:

  1. a cookie alert
  2. a navbar
  3. a site development notice to optionally indicate the state of development

Services in the ‘live’ development phase don’t need a site development notice but you can if you want to.

Site development notice

A site development notice consists of:

  • a container element using the site-development-notice class
  • within this, a layout container
  • within this, a development phase label with a summary description for users and link to give feedback

This example uses a fluid container so it does not appear broken.

Alpha This is a new website – your feedback will help us to improve it. 
<div class="site-development-notice">
  <div class="bsk-container-fluid">
    <span class="bsk-label bsk-label-phase-alpha">Alpha</span> This is a new website – your <a href='#' target="_blank">feedback</a>
    will help us to improve it.
    <hr />
  </div>
</div>

It’s strongly recommended to open feedback links in a new tab so users don’t loose their place in a process or information they were looking at.

Variants

Standard

When using a fixed-width layout:

  • wrap the cookie notice in a fixed-width container
  • wrap the container in a <div> with the .bsk-fix-alert-static-top-fixed-container-wrapper class

When using a fluid-width layout:

  • wrap the cookie notice in a fluid-width container
  • wrap the container in a <div> with the .bsk-fix-alert-static-top-fluid-container-wrapper class

This example uses a fluid container so it does not appear broken.

Alpha This is a new website – your feedback will help us to improve it. 
<div class="bsk-fix-alert-static-top-fixed-container-wrapper">
  <div class="bsk-container-fluid">
    <div class="bsk-alert bsk-alert-static-top bsk-alert-dismissible bsk-alert-solid bsk-alert-cookie-notice" role="alert" data-bsk-role="cookie-notice-example">
      <button type="button" class="bsk-close" data-dismiss="alert" aria-label="Close">&times;</button>
      This website uses cookies to help us make it better - <a href="#" class="bsk-alert-link">find out more</a>.
    </div>
  </div>
</div>

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <!-- Site name and toggle get grouped for better mobile display -->
    <div class="bsk-navbar-header">
      <button type="button" class="bsk-navbar-toggle bsk-collapsed" data-toggle="collapse" data-target="#bsk-example-navbar-collapse-1" aria-expanded="false">
        <span class="bsk-sr-only">Toggle navigation</span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
      </button>
      <a class="bsk-navbar-brand" href="#">Site Name</a>
    </div>
    <!-- Collect navigation links, forms, and other items for hiding at smaller screen sizes -->
    <div class="bsk-collapse bsk-navbar-collapse" id="bsk-example-navbar-collapse-1">
      <ul class="bsk-nav bsk-navbar-nav">
        <li class="bsk-active"><a href="#">Home <span class="bsk-sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>
        <li class="bsk-dropdown">
          <a href="#" class="bsk-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="bsk-caret"></span></a>
          <ul class="bsk-dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="bsk-divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="bsk-divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="bsk-nav bsk-navbar-nav bsk-navbar-right">
        <li class="bsk-dropdown">
          <a href="#" class="bsk-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Part of British Antarctic Survey <span class="bsk-caret"></span></a>
          <ul class="bsk-dropdown-menu">
            <li><a href="https://www.bas.ac.uk">BAS Home</a></li>
            <li><a href="https://data.bas.ac.uk">Discover BAS data</a></li>
            <li><a href="#">Another service (optional)</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="site-development-notice">
  <div class="bsk-container-fluid">
    <span class="bsk-label bsk-label-phase-alpha">Alpha</span> This is a new website – your <a href='#'>feedback</a>
    will help us to improve it.
    <hr />
  </div>
</div>

This example uses data-bsk-role="cookie-notice-example" instead of data-bsk-role="cookie-notice" so that it’s visible.

Open full example