Site header

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

Open this example in a new window

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__search  ds_site-search  ds_site-search--collapsible" 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  ds_no-margin">
                        <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  ds_button--icon-only  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>

        <nav class="ds_mobile-navigation" data-module="ds-mobile-navigation-menu">
            <button class="js-toggle-menu  ds_mobile-navigation__button" aria-expanded="false" aria-controls="mobile-navigation-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-21"></use></svg>
                <svg class="ds_icon  ds_site-header__control-icon--close  ds_site-header__control-icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#close-21"></use></svg>
            </button>

            <div id="mobile-navigation-menu" data-offsetselector=".ds_site-header">
                <div class="ds_mobile-navigation__content">

                    <div class="ds_mobile-navigation__block">
                        <div class="ds_site-search" data-module="ds-site-search">
                            <form role="search" class="ds_site-search__form">
                                <label class="ds_label  visually-hidden" for="site-search--mobile">Search</label>

                                <div class="ds_input__wrapper  ds_input__wrapper--has-icon">
                                    <input name="q" required="" id="site-search--mobile" class="ds_input  ds_site-search__input" type="text" placeholder="Search" autocomplete="off" />

                                    <button type="submit" class="ds_button  ds_button--icon-only  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 class="ds_mobile-navigation__block">
                        <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>
                    </div>

                    <button type="button" class="ds_mobile-navigation__backdrop  js-close-menu" aria-expanded="false" aria-controls="mobile-navigation-menu">
                        <span class="visually-hidden">Close menu</span>
                    </button>
                </div>
            </div>
        </nav>
    </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.

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:

Title

Clicks to the title can be tracked through the original page path, the click URL, and a data attribute attached to the title text, data-header="header-title".

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, data-header="header-logo". Where multiple logos exist, each should have a different logo-NAME data attribute.

Accessibility

“Skip to main content” can be tracked through the original page path, the click URL, and a data attribute attached to the link, data-header="header-accessibility-skip".

Expandable menu

Clicks on the expandable menu can be tracked through the original page path, the click URL, and a data attribute attached to the icon, data-header="header-menu-toggle".

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