Site header
HTML
<header class="ds_site-header ds_site-header--gradient" role="banner">
<div class="ds_wrapper">
<div class="ds_site-header__content">
<div class="ds_site-branding">
<a class="ds_site-branding__logo ds_site-branding__link" href="/">
<img class="ds_site-branding__logo-image" src="/binaries/content/gallery/designsystem/examples/scottish-government-svg" alt="Scottish Government" />
</a>
<div class="ds_site-branding__title">
Design System
</div>
</div>
<div class="ds_site-header__controls">
<label aria-controls="mobile-navigation" class="ds_site-header__control js-toggle-menu" for="menu">
<span class="ds_site-header__control-text">Menu</span>
<svg class="ds_icon ds_site-header__control-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#menu"></use></svg>
<svg class="ds_icon ds_site-header__control-icon ds_site-header__control-icon--active-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</label>
</div>
<input class="ds_site-navigation__toggle" id="menu" type="checkbox">
<nav id="mobile-navigation" class="ds_site-navigation ds_site-navigation--mobile" data-module="ds-mobile-navigation-menu">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
<div class="ds_site-search ds_site-header__search" data-module="ds-site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="text" placeholder="Search this site" autocomplete="off">
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="ds_site-header__navigation">
<div class="ds_wrapper">
<nav class="ds_site-navigation">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>About this pattern
The site header introduces wider site branding, such as the main colours in a site’s colour palette. It appears at the top of every page and can include an optional search field and primary site navigation.
On a mobile device, site navigation is hidden from view until the user clicks or taps on a ‘menu’ button.
A site header can include any of the following:
- logo
- site title
- search
- site navigation
- phase banner
Banners
A banner is a message at the top of a page which gives site-wide or service-level information.
It should appear as part of the flow of the page.
A banner should not stop users accessing information or completing a task. Do not make banners ‘sticky’ or fixed.
Place banners consistently so users can find the information in the same location across sites and services.
Use this order at the top of your page:
- Cookie banner
- Notification banner
- Site header
A phase banner should be part of the site header if required. It should be the final element in the site header before the main content.
HTML
<div class="ds_page__top">
<div id="cookie-notice" class="ds_notification ds_notification--large ds_notification--cookie js-initial-cookie-content" data-module="ds-cookie-notification">
<div class="ds_wrapper">
<div class="ds_notification__content">
<h2 class="visually-hidden">Information</h2>
<div class="ds_notification__text">
<p>We use <a href="/cookies/">cookies</a> to collect anonymous data to help us improve your site browsing
experience.</p>
<p>Click 'Accept all cookies' to agree to all cookies that collect anonymous data.
To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.</p>
<div class="ds_button-group">
<button type="button" class="ds_button ds_button--small ds_button--secondary js-accept-all-cookies">Accept all cookies</button>
<button type="button" class="ds_button ds_button--small ds_button--secondary js-accept-essential-cookies">Use essential cookies only</button>
<a href="/cookies/">Set cookie preferences</a>
</div>
</div>
</div>
</div>
</div>
<div class="ds_notification ds_reversed" data-module="ds-notification">
<div class="ds_wrapper">
<div class="ds_notification__content ds_notification__content--has-close">
<h2 class="visually-hidden">Information</h2>
<div class="ds_notification__text">
<p>We need to tell you about <a href="#">something</a></p>
</div>
<button class="ds_notification__close js-close-notification" type="button">
<span class="visually-hidden">Close this notification</span>
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</button>
</div>
</div>
</div>
<header class="ds_site-header ds_site-header--gradient" role="banner">
<div class="ds_wrapper">
<div class="ds_site-header__content">
<div class="ds_site-branding">
<a class="ds_site-branding__logo ds_site-branding__link" href="/">
<img class="ds_site-branding__logo-image" src="/binaries/content/gallery/designsystem/examples/scottish-government-svg" alt="Scottish Government" />
</a>
<div class="ds_site-branding__title">
Design System
</div>
</div>
<div class="ds_site-header__controls">
<label aria-controls="mobile-navigation" class="ds_site-header__control js-toggle-menu" for="menu">
<span class="ds_site-header__control-text">Menu</span>
<svg class="ds_icon ds_site-header__control-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#menu"></use></svg>
<svg class="ds_icon ds_site-header__control-icon ds_site-header__control-icon--active-icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</label>
</div>
<input class="ds_site-navigation__toggle" id="menu" type="checkbox">
<nav id="mobile-navigation" class="ds_site-navigation ds_site-navigation--mobile" data-module="ds-mobile-navigation-menu">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
<div class="ds_site-search ds_site-header__search" data-module="ds-site-search">
<form role="search" class="ds_site-search__form">
<label class="ds_label visually-hidden" for="site-search">Search</label>
<div class="ds_input__wrapper ds_input__wrapper--has-icon">
<input name="q" required="" id="site-search" class="ds_input ds_site-search__input" type="text" placeholder="Search this site" autocomplete="off">
<button type="submit" class="ds_button js-site-search-button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="ds_site-header__navigation">
<div class="ds_wrapper">
<nav class="ds_site-navigation">
<ul class="ds_site-navigation__list">
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Get started
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Styles
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link ds_current" aria-current="true">
Components
</a>
</li>
<li class="ds_site-navigation__item">
<a href="#" class="ds_site-navigation__link">
Patterns
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="ds_phase-banner">
<div class="ds_wrapper">
<p class="ds_phase-banner__content">
<strong class="ds_tag ds_phase-banner__tag">
Alpha
</strong>
<span class="ds_phase-banner__text">
This is a new service. Your <a href="#">feedback</a> will help us to improve it.
</span>
</p>
</div>
</div>
</header>
</div>Why we use this pattern
The site header helps a user quickly recognise a website. This is useful if they do not enter through the homepage, or if they are switching between multiple open tabs.
We’ve avoided using second level interactive navigation because of usability concerns.
Site branding
You can customise the site logo and title to help users identify the service or organisation they are using.
The site header can include:
- a logo and title separated by a divider
- a logo only
- a title only, displayed over one or two lines
When the site title appears next to a logo, it should not repeat your brand name. Instead, it should describe the service being provided to users.
Site branding should always be left aligned and of proportionate size in the site header. We recommend horizontal logos at a maximum height of 40 pixels. Vertically-oriented logos should have a maximum height of 80 pixels.
For the best display of your branding, use vector-based files such as SVG. You can also use JPG or PNG files. Make sure they are of good quality and do not appear distorted.
If you wish to discuss how best to show your site branding, please contact designsystem@gov.scot
Evidence
Analytics evidence from mygov.scot and gov.scot shows that users are familiar with the logo as a route to the homepage.
Users were more likely to navigate to other sections of gov.scot using the site header navigation than using the same links lower down the homepage.
Website analytics
The site header tracking is available for each of its components: Site search, site navigation and phase banner.
The logo, title, skip navigation and expandable menu are also trackable:
-
Clicks to the title can be tracked through the original page path, the click URL, and a data attribute attached to the title text.
-
Clicks to the logo can be tracked through tracked through the original page path, the click URL, and a data attribute attached to the image.
-
Clicks to ‘Skip to main content’ can be tracked through tracked through the original page path, the click URL, and a data attribute attached to the link.
-
Clicks on the expandable menu can be tracked through the original page path, the click URL, and a data attribute attached to the icon.
The data attributes are added automatically by the Design System’s ‘tracking’ script.
Site branding tracking attributes
The site branding logo link is given a data-header attribute. Its value is header-logo.
The site branding title link is given a data-header attribute. Its value is header-title.
<div class="ds_site-branding">
<a class="ds_site-branding__logo ds_site-branding__link" href="/" data-header="header-logo">
<img class="ds_site-branding__logo-image" src="/assets/images/logos/scottish-government.svg" alt="Scottish Government">
</a>
<div class="ds_site-branding__title" data-header="header-title">
Design System
</div>
</div>