New This website is new, 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.

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
  • 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
  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:


Alpha This is a new website – your feedback will help us to improve it. 
<div>
  <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>

It is recommended to open feedback links in a new tab so users don't lose their place in a process or information they were looking at.

Variants

Standard

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- Brand -->
              <a href="#" class="px-3 py-2"><b>Site Name</b></a>
              <!-- Desktop nav items -->
              <div class="hidden lg:flex px-4 items-center">
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
          <!-- RIGHT (desktop) -->
          <div data-dropdown-wrapper class="hidden xlmenu:flex items-center">
              <div class="relative menu-wrapper ml-4">
                  <button data-dropdown-toggle class="inline-flex items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
                      Part of British Antarctic Survey
                      <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                  </button>
                  <div data-dropdown-menu class="hidden absolute rounded-b-lg z-50 mt-4 px-2 pb-1 bsk-bg-blue shadow-lg translate-x-27">                        
                      <a href="https://www.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>                        
                      <a href="https://data.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>                            
                  </div>
              </div>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex justify-end xlmenu:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none -translate-y-1">
              <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
              <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
          </button>
          <!-- Mobile menu dropdown -->
          <div id="main-menu" role="menu" class="menu-dropdown z-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
              <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
          </div>
      </div>        
  </div>
</nav>