Site header

The site header contains key branding and the title of a website. It appears on every page.

Sample 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="/assets/images/logos/digital-scotland.svg" alt="Digital Scotland" />
                </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 xlink: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 xlink: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_mobile-navigation__list">
                    <li class="ds_mobile-navigation__item">
                        <a href="#" class="ds_mobile-navigation__link">
                            Get started
                        </a>
                    </li>
                    <li class="ds_mobile-navigation__item">
                        <a href="#" class="ds_mobile-navigation__link">
                            Styles
                        </a>
                    </li>
                    <li class="ds_mobile-navigation__item">
                        <span class="ds_mobile-navigation__link  ds_current">
                            Components
                        </span>
                    </li>
                    <li class="ds_mobile-navigation__item">
                        <a href="#" class="ds_mobile-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" 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 xlink: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">
                        <span class="ds_site-navigation__link  ds_current">
                            Components
                        </span>
                    </li>
                    <li class="ds_site-navigation__item">
                        <a href="#" class="ds_site-navigation__link">
                            Patterns
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

Developer notes

The site header will inherit its colour scheme from the colours you have defined for primary and secondary branding.

Configuration options

Use the following modifier classes to alter the display of the site header:

ds_site-header--gradient changes the solid band across the top of the border to a gradient of your primary and secondary brand colours.

ds_site-header--shadow replaces the bottom border of the site header with a drop shadow

Reversed variant

Use a class of ds_reversed on the header to reverse the colours of the site header and its subcomponents.

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, site navigation is hidden from view until the user clicks or taps on a ‘menu’ button.

Other versions of this pattern

  1. Plain header
  2. Plain header with logo and site title
  3. Header with search
  4. Header with site navigation
  5. Header with search and site navigation
  6. Header with phase banner

Why we use this pattern

The site header helps a user quickly recognise a website, for example if they don’t come to a website via a homepage, or they have multiple tabs open and are switching back and forth between tabs.

We’ve avoided using second level interactive navigation because of usability concerns.

Site branding

Logos and site sub titles can be customised to help users identify which service or organisation site they are using.

This can be formed in variations of:

  1. A logo and subtitle separated by a divider
  2. Only a logo
  3. Only a sub title, which can run over one or two lines of text.

When the subtitle appears beside a logo, it should not repeat the name of your brand, rather be descriptive of the service being provided to the user.

Site branding should always be left aligned and of proportionate size in the site header. For example we recommend horizontal logos at a max height of 40px; the same as the Digital Scotland logo appears. Some logos are vertical aligned in which case 80px is the recommended max height.

For the best display of your branding, use vector based files such as SVG. Alternatively JPG or PNG files can be used but ensure these are of sufficient quality and will not distort.

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 also more likely to navigate to site sections of gov.scot using the site header’s primary navigation than using the same links on panels lower down the homepage.

Website analytics

The site header tracking is available for each of its components: Site search, site navigation and phase banner. In addition, the logo, title, skip navigation and expandable menu are trackable as follows:

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

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top